盒子模型是css中一個重要的概念，其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來理解下兩種不同的盒子：

從上圖可以看到標準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。

ie 盒子模型

從上圖可以看到 ie 盒子模型的范圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

例：一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，假如用標準 w3c 盒子模型解釋，那么這個盒子需要占據的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用ie 盒子模型，那么這個盒子需要占據的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實際大小為：寬 200px、高 50px。

1、考慮到盒子的大小設置會比較麻煩，有時設置的width，結果最后大小不是之前設置的大小，所以這時就要box-sizing登場了，當我們設置box-sizing:border-box以后，如果我們想要一個寬度100的盒子，直接設置width為100，就不用考慮該盒子是否為標準盒子了。這是box-sixing最實用的一個屬性。等于：siting-width=border+padding+content-width;

2、當box-sizing設置成content-box后，等于標準情況：siting-width=conten-width;