Bagaimana untuk Menghalang Input CSS dengan `lebar: 100%` daripada Melebihi Sempadan Induk?

Input CSS dengan lebar: 100% Melampaui Batasan Ibu Bapa

Dalam CSS, lebar dan ketinggian elemen digunakan pada kawasan kandungannya, termasuk pelapik. Walau bagaimanapun, menetapkan elemen dengan padding kepada 100% lebar boleh mengakibatkan ia melebihi saiz induknya.

Memahami Model Kotak Asas CSS

Model Kotak Asas CSS mentakrifkan cara saiz dan reka letak elemen dikira. Ia terdiri daripada kandungan, padding, jidar dan jidar.

Apabila lebar: 100% digunakan, ia mempengaruhi lebar kawasan kandungan. Tetapi jika elemen mempunyai pelapik, ia melangkaui kawasan kandungan, dengan berkesan meningkatkan saiz keseluruhannya.

Memecahkan Penghalang Padding

Untuk mengelakkan pelapik daripada menjejaskan lebar dan ketinggian elemen, tetapkan kotak -sizing CSS property to border-box:

box-sizing: border-box;

Ini mengarahkan penyemak imbas untuk memasukkan padding innerhalb lebar dan ketinggian elemen, menghalangnya daripada melangkaui sempadan induk.

Keserasian Pelayar

saiz kotak disokong oleh semua penyemak imbas utama, tetapi pertimbangkan untuk menggunakan awalan untuk versi Internet Explorer yang lebih lama (sebelumnya kepada versi 8).

Menggunakan saiz kotak dalam Konteks

Untuk menyelesaikan isu dalam JSFiddle yang anda sediakan, tambahkan saiz kotak: kotak sempadan; kepada peraturan berikut:

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

Penggunaan "Diwarisi" yang Disyorkan

Paul Irish dan Chris Coyier mengesyorkan mewarisi saiz kotak daripada elemen html untuk memastikan konsistensi sepanjang halaman:

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

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Input CSS dengan `lebar: 100%` daripada Melebihi Sempadan Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!