box-sizing CSS3 properti
contoh
Dua kotak perbatasan yang ditunjuk:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
Coba »
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.
Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.
属性 | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Definisi atribut dan petunjuk
kotak-sizing properti memungkinkan Anda untuk menentukan unsur-unsur tertentu dalam beberapa cara untuk beradaptasi dengan daerah yang ditunjuk.
Misalnya, jika Anda perlu untuk menempatkan dua berdampingan dengan kotak perbatasan dengan kotak-sizing untuk "border-box". Hal ini dapat membuat browser menampilkan kotak dengan lebar tertentu dan tinggi, dan perbatasan, dan padding ke dalam kotak.
default: | konten-kotak |
---|---|
warisan: | tidak |
versi: | CSS3 |
sintaks JavaScript: | keberatan .style.boxSizing = "border-box" |
tatabahasa
box-sizing: konten-kotak | border-box | mewarisi:
nilai | penjelasan |
---|---|
konten-kotak | Ini adalah perilaku lebar dan tinggi tertentu CSS2.1. Lebar dan tinggi (min / max atribut) yang ditentukan elemen cocok untuk lebar kotak dan tinggi. Padding dan perbatasan, dan menggambar layout menentukan lebar dan tinggi dari elemen kecuali |
border-box | Menentukan lebar dan tinggi (min / max atribut) untuk menentukan kotak perbatasan elemen. Dengan kata lain, unsur-unsur yang ditentukan lebar dan tinggi termasuk penunjukan padding dan perbatasan. Lebar dan tinggi dari konten minus sisi masing-masing dari perbatasan dan mengisi dihitung dari lebar "width" dan "height" atribut tertentu |
mewarisi | Nilai menentukan properti kotak-sizing harus diwarisi dari elemen induk |
Artikel terkait
CSS3 tutorial: CSS3 User Interface