Contoh
Mengubah properti boxSizing:
document.getElementById("myDIV").style.boxSizing = "border-box";
Cobalah sendiri " Definisi dan Penggunaan
Properti boxSizing memungkinkan Anda untuk menentukan unsur-unsur tertentu untuk menyesuaikan suatu daerah dengan cara tertentu.
Misalnya, jika Anda ingin dua berbatasan kotak berdampingan, dapat dicapai melalui pengaturan boxSizing untuk "border-box" . Hal ini akan memaksa browser untuk membuat kotak dengan lebar tertentu dan tinggi, dan tempat perbatasan dan padding di dalam kotak.
Dukungan Browser
Properti boxSizing didukung di Internet Explorer, Opera, Chrome, dan Safari.
Firefox mendukung alternatif, properti MozBoxSizing.
Sintaksis
Kembali properti boxSizing:
object .style.boxSizing Mengatur properti boxSizing:
object .style.boxSizing="content-box|border-box|initial|inherit"
Nilai properti
| Nilai | Deskripsi |
|---|---|
| content-box | nilai default. Ini adalah perilaku lebar dan tinggi seperti yang ditentukan oleh CSS2.1. Lebar ditentukan dan tinggi (and min/max properties) berlaku untuk lebar dan tinggi masing-masing kotak isi dari elemen. Padding dan perbatasan elemen diletakkan dan ditarik luar lebar tertentu dan tinggi |
| border-box | Lebar ditentukan dan tinggi (and min/max properties) pada elemen ini menentukan kotak perbatasan elemen. Artinya, padding atau perbatasan ditentukan pada unsur ini ditata dan ditarik dalam lebar tertentu ini dan tinggi. Lebar konten dan tinggi dihitung dengan mengurangkan perbatasan dan padding lebar dari sisi masing-masing dari 'lebar' yang ditentukan dan sifat 'tinggi' |
| initial | Set properti ini ke nilai default. Baca tentang awal |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Rincian teknis
| Nilai default: | konten-kotak |
|---|---|
| Kembali Nilai: | Sebuah String, yang mewakili properti kotak-sizing dari unsur |
| CSS Versi | CSS3 |
Pages terkait
Referensi CSS: box-sizing property
<Style Object