Tutorial CSS 3: Memahami properti ukuran kotak
Penulis：Eve Cole
Waktu Pembaruan：2009-06-12 17:54:27
Berbicara tentang bug IE, contoh terkenalnya adalah interpretasi yang salah terhadap "model kotak": di IE5.x dan IE6/7 dalam mode Quirks, baik border maupun padding disertakan dalam lebarnya. Hal ini menambah banyak masalah pada pekerjaan insinyur front-end. Setiap kotak yang perlu menentukan ukuran harus dipertimbangkan: Apakah ini memicu "bug model kotak"?
Pada saat yang sama, karena kepatuhan kelompok browser lain terhadap standar, ketika kita secara akurat menentukan kotak yang ditampilkan dalam ruang terbatas, kita juga perlu menghitung: ruang yang tersisa untuk kotak tersebut hanya sebesar itu tidak termasuk batas dan padding , kita harus menulis lebarnya berapa?
Situasi ini telah membaik di era CSS3, berkat properti yang disebut box-sizing, yang memiliki dua nilai "content-box" dan "border-box".
Saat menentukan ukuran kotak: kotak konten;, interpretasi browser terhadap model kotak mengikuti standar W3C yang kami kenali sebelumnya;
Ketika box-sizing: border-box; didefinisikan, interpretasi browser terhadap model kotak sama dengan IE6;
Mengapa atribut ini dikatakan “terlambat”? Meskipun interpretasi IE terhadap model kotak tidak sesuai dengan spesifikasi W3C, interpretasi tersebut juga memiliki kelebihan: tidak peduli bagaimana Anda mengubah nilai batas dan bantalan, hal ini tidak akan menyebabkan ukuran total kotak berubah, dan akan terjadi tidak mengganggu tata letak halaman secara keseluruhan. Pada browser modern seperti Firefox, jika kita ingin mengubah nilai padding, kita harus menghitung ulang lebar kotaknya. Sekarang IE6 sudah mati, properti CSS ini sudah terlambat.
Untuk mencoba properti baru ini, silakan gunakan -moz-box-sizing untuk Firefox, gunakan -webkit-box-sizing untuk Safari/WebKit, dan cukup gunakan box-sizing untuk Opera.
