Mengapa Elemen Input Saya Melimpahi Induknya Apabila Saya Menggunakan `lebar: 100%`?

Memahami Isu dengan Sempadan Input CSS

Dalam pembangunan web, adalah perkara biasa untuk menghadapi situasi di mana elemen input HTML melebihi sempadan induknya apabila lebar: 100% digunakan . Isu ini timbul disebabkan oleh model kotak CSS, yang menerangkan cara elemen bersaiz dan dibentangkan.

Model Kotak

Model kotak CSS menganggap dimensi elemen dalam empat bahagian:

• Kotak Kandungan: Kawasan paling dalam yang mengandungi kandungan elemen, seperti teks atau imej.
• Padding: Ruang antara kotak kandungan dan sempadan elemen.
• Sempadan: Garisan yang mengelilingi elemen.
• Margin: Ruang di luar sempadan.

Kesan Padding pada Dimensi

Secara lalai, sifat lebar dan ketinggian sesuatu elemen digunakan pada kotak kandungannya. Walau bagaimanapun, apabila padding hadir, ia melangkaui kotak kandungan, meningkatkan saiz keseluruhan elemen.

Jika anda menetapkan lebar: 100% pada elemen dengan padding, padding akan menolak lebar elemen melebihi 100 % daripada lebar induknya, menyebabkan ia melebihi sempadan.

Melaraskan Tingkah Laku dengan saiz kotak

Untuk mengelakkan padding daripada menjejaskan lebar elemen, anda boleh menetapkan sifat saiz kotak kepada kotak sempadan. Ini memberitahu penyemak imbas untuk memasukkan padding dalam pengiraan lebar dan ketinggian elemen.

Berikut ialah kod CSS menggunakan saiz kotak:

input[type=text],
input[type=password] {
  width: 100%;
  box-sizing: border-box;
}

Amalan Terbaik

Pertimbangkan mengikuti amalan terbaik untuk saiz yang konsisten:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

Ini memastikan kotak sempadan saiz diwarisi oleh semua elemen, mengelakkan kemungkinan ketidakkonsistenan.

Atas ialah kandungan terperinci Mengapa Elemen Input Saya Melimpahi Induknya Apabila Saya Menggunakan `lebar: 100%`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!