Mengapakah Input CSS dengan `width: 100%` Melangkaui Had Induknya?

Input CSS dengan lebar: 100% keluar dari batasan ibu bapa

Mengapa ini berlaku?

Dalam CSS, sifat lebar dan ketinggian menetapkan saiz kotak kandungan. Walau bagaimanapun, padding ditambah di luar kotak kandungan, meningkatkan saiz keseluruhan elemen.

Apabila anda menetapkan elemen dengan padding kepada lebar: 100%, paddingnya menjadikannya lebih lebar daripada 100% daripada elemen yang mengandunginya.

Penyelesaian

Untuk mengelakkan pelapik daripada menjejaskan lebar atau ketinggian elemen, gunakan sifat bersaiz kotak ditetapkan ke kotak sempadan:

box-sizing: border-box;

Ini menjadikan sifat lebar dan ketinggian termasuk padding dan sempadan, menghasilkan jumlah lebar 100%.

Keserasian Pelayar

saiz kotak mempunyai keserasian pelayar yang baik (IE8 ). Tiada awalan diperlukan.

Pendekatan Alternatif: Saiz Kotak "Diwarisi"

Sesetengah pakar mengesyorkan menggunakan pendekatan "diwarisi" berikut:

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

Ini menetapkan saiz kotak ke kotak sempadan untuk keseluruhan dokumen, dan membenarkan semua elemen mewarisinya tetapan.

Demonstrasi

Berikut ialah demonstrasi dengan kotak sempadan digunakan pada elemen input:

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

Atas ialah kandungan terperinci Mengapakah Input CSS dengan `width: 100%` Melangkaui Had Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!