CSS3盒大小調整
CSS3的box-sizing屬性允許我們，包括在元素的總寬度和高度的填充和邊框。
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次是數字-webkit-或-moz-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
如果沒有CSS3 box-sizing屬性
缺省情況下，元件的寬度和高度被計算如下：
寬+填充+邊界=元素的實際寬度
身高+填充+邊界=元素的實際高度
這意味著：當您設置元素的寬度/高度，元素經常出現大於已設置（因為該元素的邊框和填充被添加到元素的指定寬/高）。
下圖顯示了兩個<div>使用相同的指定寬度和高度元素：
這DIV較小（寬度為300像素，高度100像素是）。
這DIV越大（寬也是300像素，高100像素是）。
這兩個<div>上面結了結果中的不同尺寸的元素（因為DIV2已指定填充）：
例
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} 試一試» 所以，很長一段時間的Web開發人員指定比他們想要一個較小的寬度值，因為他們不得不減去了填充和邊框。
用CSS3，所述box-sizing屬性解決了這個問題。
隨著CSS3 box-sizing屬性
CSS3的box-sizing屬性允許我們，包括在元素的總寬度和高度的填充和邊框。
如果設置box-sizing: border-box;上的元素填充和邊界都包含在寬度和高度：
兩者的div和現在相同的大小！
萬歲！
下面是同樣的例子，上面用box-sizing: border-box;加入兩個<div>元素：
例
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} 試一試» 由於使用的結果box-sizing: border-box;如此好，很多開發者希望在其頁面上的所有元素，以這種方式工作。
下面的代碼確保所有元素都在這個更直觀的方式大小。 很多瀏覽器已經使用box-sizing: border-box;許多表單元素（但不是全部-這就是為什麼投入和文本區域在寬度顯得與眾不同：100％）。
運用這所有的元素是安全和明智的：