1.盒子模型有兩種，標準盒模型和IE盒模型，其中W3C標準的盒模型就是在網頁的頂部加上 DOCTYPE 聲明。

（1）W3C標準的盒模型

W3C盒子模型包括4部分：margin，border，padding，content，其中，content不包括其他部分，下面內容（content）部分為藍色的部分，不包含其他。

w3c中的盒子模型的寬:包括margin+border+padding+width;（width為content的寬度）

width:margin*2+border*2+padding*2+width;

對應上面的公式，下圖中為盒子模型的總寬度為0+1*2+10*2+98

高度同寬度的計算方式：

height:margin*2+border*2+padding*2+height;

對應上面的公式，下圖中為盒子模型的總高度為0+1*2+5*2+18

（2）IE盒模型

在IE盒模型中，計算總寬度和高度的方法是一樣的，但是IE盒模型中，content部分的寬度width和高度height是不一樣的。content的內容包括padding和border和content

IE和模型中content的寬度：content+padding*2+border*2

標準盒子模型中，width和height是content的長與寬
而IE盒子模型中，width和height是content+padding+border區域的長與寬

2.box-sizing 屬性

box-sizing屬性值可以為這三個值中的一個：content-box（default），border-box，padding-box。

content-box，border和padding不計算入width之內，也就是說，整個界面的寬度要是content+padding+border，對應標準盒子模型 。

padding-box，padding計算入width內也就是說，整個界面的寬度要是content+padding。

border-box，border和padding計算入width之內，其實就是怪異模式了~也就是說，整個界面的寬度要是content的width，對應IE盒子模型。

默認的box-sizing屬性是content-box，寬高屬性不計入內邊距及邊框的數值。變為border-box之後，元素先減去邊框和內邊距才計算內容。

使用場景：

　　在CSS中，你設置一個元素的 width與 height只會應用到這個元素的內容區。如果這個元素有任何的 border或 padding，繪制到屏幕上時的盒子寬度和高度會加上設置的邊框和內邊距值。這意味著當你調整一個元素的寬度和高度時需要時刻註意到這個元素的邊框和內邊距。當我們實現響應式布局時，這個特點尤其煩人。

box-sizing 屬性可以被用來調整這些表現:

• content-box 是默認值。如果你設置一個元素的寬為100px，那麽這個元素的內容區會有100px寬，並且任何邊框和內邊距的寬度都會被增加到最後繪制出來的元素寬度中。
• border-box 告訴瀏覽器去理解你設置的邊框和內邊距的值是包含在width內的。也就是說，如果你將一個元素的width設為100px,那麽這100px會包含其它的border和padding，內容區的實際寬度會是width減去border + padding的計算值。大多數情況下這使得我們更容易的去設定一個元素的寬高

盜某個大神的一張圖，能很清楚知道box-sizing屬性的作用

W3c盒子模型+IE盒子模型+box-sizing屬性