Mengapa Butang Tidak Berkembang untuk Mengisi Bekasnya dengan `display: block` dan `width: auto`?

Mengapa "display: block" & "width: auto" Tidak Kembangkan Butang untuk Mengisi Bekas?

Dalam HTML, elemen tertentu, seperti butang, input, pilihan dan imej, ditetapkan sebagai "elemen yang diganti." Elemen ini mempunyai dimensi dan penampilan yang wujud yang ditentukan oleh sumber luaran, seperti sistem pengendalian atau pemalam.

Apabila anda menggunakan "paparan: sekat" pada butang, ini menunjukkan bahawa butang itu harus berkelakuan seperti elemen peringkat blok dan menempati lebar penuh bekasnya. Walau bagaimanapun, "lebar: auto" menyatakan bahawa lebar intrinsik butang harus digunakan.

Elemen yang diganti mempunyai dimensi intrinsik, bermakna lebar dan tingginya tetap dan tidak boleh diubah suai oleh CSS. Sebagai contoh, dimensi intrinsik elemen imej ditentukan oleh saiz fail imej. Apabila "lebar: auto" digunakan pada elemen yang diganti, penyemak imbas menghormati lebar intrinsiknya.

Selain itu, elemen yang diganti mungkin mempunyai keperluan pemformatan visual yang dikenakan oleh penyemak imbas atau sistem pengendalian yang mengatasi penggayaan CSS. Butang, sebagai contoh, mempunyai kawalan antara muka pengguna terbina dalam yang tidak boleh diubah suai semata-mata melalui CSS.

Dalam kes butang, walaupun tidak ditakrifkan secara rasmi sebagai elemen yang digantikan oleh W3C, ia mempamerkan gelagat yang serupa. Oleh itu, menggunakan "paparan: blok; lebar: auto;" ke butang tidak akan meregangkannya untuk mengisi bekas kerana lebar intrinsiknya dikekang oleh keperluan pemformatan visual butang.

Atas ialah kandungan terperinci Mengapa Butang Tidak Berkembang untuk Mengisi Bekasnya dengan `display: block` dan `width: auto`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!