今天看了一些關於box-sizing的一些資料，在這里整理一下，希望也能對大家有所幫助。
box-sizing是CSS的一個屬性，很好的解決了盒模型的相關問題。CSS中的盒模型（Box model）分為兩派，一派是W3C的標准模型，一派是IE的傳統模型。那它們之間有什么不同的呢？首先需要明確它們都是對元素計算尺寸的模型，具體說就是對元素的width,height,padding,border以及元素實際尺寸的計算關系；而不同的地方就在於兩者的計算方法不一至：（下面引用一些公式向大家展示一下兩者的不同之處）
W3C的標准盒模型
IE傳統盒模型（IE6以下不含IE6版本或“QuirksMode下IE5.5+”）
接下來直接看看box-sizing的應用吧。
box-sizing屬性可以分為兩個值：content-box（default），border-box。
content-box，border和padding不計算入width之內
border-box，border和padding計算入width之內
（注1：ie8+瀏覽器支持content-box和border-box；ff則支持全部三個值）
（注2：使用時，有些瀏覽器還是需要加上自己的前綴，Mozilla需要加上-moz-，Webkit內核需要加上-webkit-，Presto內核-o-,IE8-ms-）
栗子，接住：
<style type="text/css">
.content-box{
-webkit-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.border-box{
-webkit-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
我是在谷歌下運行的，所以加了-webkit-前綴，效果如下：
藍色加邊框：總寬150px，高150px
黃色加邊框：總寬100px，高100px
通過這一栗子，相信大家弄清楚了這兩個。與剛才給大家提及的兩派盒子模型聯系看看，總結得出：content-box相當於W3C下的模式，而border-box則為傳統IE下的模式了。這樣大家就可以解決一些布局上的難題了吧。當然，box-sizing的更多實際運用，在這里就不多說了，在次拋磚而已，獻上。