一探究竟：box-sizing

box-sizing是css3的性屬性，關於這個屬性，官方的解釋是 ：「box-sizing 屬性容許您以特定的方式定義匹配某個區域的特定元素。」 這個解釋對於新使用box-sizing 的人或許不是很好理解。要理解這個屬性，還得從css的盒子模型提及。

說到css的盒子模型，你們都不會陌生。首先，盒子模型自己有兩種模式：標準模式和怪異模式。關於標準模式和怪異模式的解釋，在這裏很少述說了。下面咱們用div定義的「盒子」來理解這兩種模式之間的差別。

咱們定義一個div：

.box{
	width:100px;
	height:100px;
	border:10px #ddd solid;
	padding:10px;
	margin:10px;
}   

　　

在chrome瀏覽器下解析是這樣的：

此時，box的width/height 實際上不包含padding和border,即box內容區的寬/高 = 100px;此時，是標準模式的盒模型

若是加上box-sizing:border-box

.box{
	width:100px;
	height:100px;
	border:10px #ddd solid;
	padding:10px;
	margin:10px; 
        box-sizing:border-box;
}   

　　

此時，box的width/height 實際上包含了padding和border,即box內容區的寬/高 = 60px; 此時，是怪異模式的盒模型。

box-sizing的主要屬性有兩種：border-box和content-box，默認狀況下，瀏覽器是按content-box即標準模式解析盒模型的，上面第一種狀況便是。若是定義了box-sizing:border-box；瀏覽器就會以怪異模式解析盒子模型了

box-sizing是css3的屬性，對於咱們css盒子模型的兼容問題提供了很好的幫助，更可喜的是，連咱們的IE8也支持了這一屬性。