CSS3 box-sizing 屬性

實例

指定兩個boxes接壤：

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

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在-webkit-, -ms- 或-moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

属性
box-sizing	10.0 4.0 -webkit-	8.0	29.0 2.0 -moz-	5.1 3.2 -webkit-	9.5

box-sizing 屬性允許你以某種方式定義某些元素，以適應指定區域。

例如，假如您需要並排放置兩個帶邊框的框，可通過將box-sizing 設置為"border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。

默認值:	content-box
繼承:	no
版本:	CSS3
JavaScript 語法:	object.style.boxSizing="border-box"

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

值	說明
content-box	這是CSS2.1指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用於box的寬度和高度。元素的填充和邊框佈局和繪製指定寬度和高度除外
border-box	指定寬度和高度（最小/最大屬性）確定元素邊框box。也就是說，對元素指定寬度和高度包括padding和border的指定。內容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的"寬度"和"高度"屬性計算
inherit	指定box-sizing屬性的值，應該從父元素繼承