CSS box-sizing 属性

definisi dan penggunaan

aturan sifat box-sizing membenarkan anda untuk menentukan cara khusus untuk mensesuaikan elemen khusus untuk kawasan tertentu.

contohnya, jika anda ingin meletakkan dua kotak dengan pinggir bersampingan, anda boleh menetapkan box-sizing menjadi "border-box". Ini akan memaparkan perekap untuk kotak dengan lebar dan tinggi yang ditentukan, dan masukkan pinggir dan marjin ke dalam kotak.

lihat juga:

panduan CSS3:Kawasan penggunaan UI CSS3

panduan HTML DOM:aturan sifat boxSizing

contoh

menentukan dua kotak bersampingan dengan pinggir:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
lebar:50%;
float:left;
}

cuba sendiri

ada lebih banyak contoh di bawah halaman.

gramata CSS

box-sizing: content-box|border-box|inherit;

nilai sifat

nilai penyataan
content-box

ini adalah tingkah laku lebar dan tinggi yang diatur oleh CSS2.1.

lebar dan tinggi diterapkan secara berasingan ke kotak kandungan elemen.

marjin dan pinggir elemen digambarkan di luar lebar dan tinggi.
border-box

lebar dan tinggi yang ditetapkan untuk elemen menentukan buah pinggir elemen.

ini bermakna, setiap marjin dan pinggir yang ditetapkan untuk elemen akan digambarkan di dalam lebar dan tinggi yang ditetapkan.

lebar dan tinggi kandungan boleh didapatkan dengan mengurangkan pinggir dan marjin daripada lebar dan tinggi yang ditetapkan.
inherit dikenakan untuk memerintahkan nilai sifat box-sizing daripada elemen bapa.

detil teknikal

nilai lalai: content-box
keberkesanan warisan: tidak
versi: CSS3
语法 JavaScript: objek.style.boxSizing="border-box"

keupayaan perekap

nombor dalam tabel menunjukkan versi perekap yang mendukung sifat ini untuk pertama kalinya.

nombor yang mempunyai -webkit- atau -moz- adalah versi pertama yang menggunakan awalan.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5