例
指定<div>元素應該有填充和邊框列入元素的總寬度和高度：
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
試一試» 更多"Try it Yourself"下面的例子。
定義和用法
盒上漿屬性用來告訴瀏覽器什麼上漿性能(width and height)應包括。
他們應該包括邊界框？ 或者僅僅是內容框（這是width和height屬性的默認值）？
| 默認值： | content-box |
|---|---|
| 遺傳： | no |
| 動畫： | no. Read about animatable |
| 版： | CSS3 |
| JavaScript語法： | object .style.boxSizing="border-box" Try it |
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次是-webkit-號碼或-moz-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- | 8 | 29.0 2.0 -moz- | 5.1 3.2 -webkit- | 9.5 |
CSS語法
box-sizing: content-box|border-box|initial|inherit;屬性值
| 值 | 描述 |
|---|---|
| content-box | 默認。 的寬度和高度屬性(and min/max properties)僅包括的內容。 邊界，填充，或餘量不包括 |
| border-box | 寬度和高度的屬性(and min/max properties)包括內容，填充和邊界，但不是保證金 |
| initial | 將此屬性設置為默認值。 閱讀關於初始 |
| inherit | 繼承其父元素此屬性。 閱讀關於繼承 |
更多示例
相關頁面
CSS3教程： CSS3盒大小調整
HTML DOM參考： boxSizing property