簡介
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
語法
box-sizing：content-box | border-box
默認值：content-box
取值
content-box：
padding和border不被包含在定義的width和height之內。對象的實際寬度等於設定的width值和border、padding之和，即 ( Element width = width + border + padding)
此屬性表現為標準模式下的盒模型。
border-box：
padding和border被包含在定義的width和height之內。對象的實際寬度就等於設定的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width )
此屬性表現為怪異模式下的盒模型。
示例：
content-box:
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
實際寬度為：200+10*2+15*2
內容寬度為:200
border-box:
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
實際寬度為：200
內容寬度為:200-10*2-15*2
說明
設定或檢索對象的盒模型組成模式。
對應的腳本特性為boxSizing。
寫法：
核心類型寫法(box-sizing)
Webkit(Chrome/Safari)-webkit-box-sizing
Gecko(Firefox)-moz-box-sizing
Presto(Opera)-o-box-sizing
Trident(IE)IE8:-ms-box-sizing/IE9:box-sizing
瀏覽器是否支持：
| (×)IE6 | (√)Firefox 2.0 | (√)Chrome 1.0.x | (√)Opera 9.63 | (√)Safari 3.1 |
| (×)IE7 | (√)Firefox 3.0 | (√)Chrome 2.0.x | (√)Safari 4 | |
| (√)IE8 | (√)Firefox 3.5 |
示例
.test {
width: 200px;
height: 70px;
padding: 10px;
border: 15px solid#999; - webkit - box - sizing: content - box; - moz - box - sizing: content - box; - ms - box - sizing: content - box;
box - sizing: content - box;
background: #eee;
}.test2 {
width: 200px;
height: 70px;
padding: 10px;
border: 15px solid#999; - webkit - box - sizing: border - box; - moz - box - sizing: border - box; - ms - box - sizing: border - box;
box - sizing: border - box;
background: #eee;
margin - top: 20px;
}
content - boxborder - boxabc
