當你設置一個元素為?box-sizing: border-box;?時，此元素的內邊距和邊框不再會增加它的寬度。

例如：

<div class="box">舉個例子</div>

.box { ?

????width: 500px; ????

? ? height:100px; ?

? ? border: 1px solid #000;

? ??-webkit-box-sizing: border-box; ? ??

? ? ? ? -moz-box-sizing: border-box;

? ? ? ? ? ? ? ? ? box-sizing: border-box;

}

如果這時候你加上一個內邊距屬性，padding: 10px;

這個div不會撐開，即你所見的邊框位置沒有任何變動，但是“舉個例子”這句話會和div邊框有10px的間距。

一般在寫頁面的時候用這個屬性就不會再考慮邊框和內邊距會改變整體所占寬度，即不用再根據盒子模型再去計算，省去很多麻煩。

這個一般在做自適應的網頁設計的時候用呀，用這個屬性網頁結構才不會被破壞，希望可以幫到你

box-sizing:border-box 這是怪異盒模型

當用 IE6 和 IE7 瀏覽器打開代碼時使用.