box-sizing

人們慢慢的意識到傳統的盒子模型不直接，所以他們新增了一個叫做?box-sizing?的CSS屬性。當你設置一個元素為?box-sizing: border-box;?時，此元素的內邊距和邊框不再會增加它的寬度。這里有一個與前一頁相同的例子，唯一的區別是兩個元素都設置了?box-sizing: border-box;?：

.simple {width: 500px;margin: 20px auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}.fancy {width: 500px;margin: 20px auto;padding: 50px;border: solid blue 10px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}

<div class="simple">

我們現在一樣大小了！

</div>

<div class="fancy">

萬歲！

</div>

既然沒有比這更好的方法，一些CSS開發者想要頁面上所有的元素都有如此表現。所以開發者們把以下CSS代碼放在他們頁面上：

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}

這樣可以確保所有的元素都會用這種更直觀的方式排版。

不過?box-sizing?是個很新的屬性，目前你還應該像我上面例子中那樣使用?-webkit-?和?-moz-?前綴。這可以啟用特定瀏覽器實驗中的特性。同時記住它是支持IE8+的。