長期以來,w3c的盒模型都是很噁心的,我們設定了一個盒子的width和height,如果我們要再去給其設定padding,border,那麼它的真實大小是width/height+padding+border,如下:

width: 200px;
height: 200px;
background: #888;
text-align: center;
border: 10px #5cb85c solid;
padding: 20px;

大家可以用瀏覽器除錯發現,這個設定的灰色部分是width/height,白色部分是padding,綠色部分是border,你會發現,這樣加起來實際寬高是260px;這即為w3c的盒模型標準,然而這樣的標準跟我們日常理解是有衝突的,並且造成的問題很多,比如我們給一個元素設定了寬高,再去設定padding和border我們就必須去計算,然後從width/height中減去這一部分.非常麻煩.我們通常理解應該是設定了寬高即為總的寬高,再去設定padding和border它依舊那麼大.
如下:

width: 200px;
height: 200px;
background: #888;
text-align: center;
border: 10px #5cb85c solid;
padding: 20px;
box-sizing: border-box;

你會發現這樣才是我們心中的盒模型,padding+border+content=width/height,兩者相差僅僅一個box-sizing的屬性
在我們吐槽這個w3c組織的噁心的標準的時候,我們一直唾棄的IE實際上早已解決了這個問題,在ie6之前,ie的盒模型即是這樣的,ie6/7下的怪異模式也是這樣的,歷史原因就不詳談了,我們談一下解決辦法.
坑比的w3c為了給當年的錯誤擦屁股,在css3中增加了這個屬性,box-sizing:border-box|content-box;這個屬性兩個取值就代表了兩種盒模型,border-box即為我們希望的,content-box即為w3c預設的盒模型.
用法就是這麼簡單,目前這個屬效能夠相容IE8,基本常用的都能相容了.
用這個屬性你就會有很多方便,比如我們不需要去計算盒模型大小了,在切圖時直接測量整個部分的大小,設定width/height,然後繼續設定padding和border都不會影響盒子大小了.需要注意的是我們常常使用的bootstrap框架在3以後的版本就全部使用的是border-box盒模型,所以當你使用bootstrap框架的時候,你就要注意這裡面的盒模型的不同了.