盒子模型是什麼？
CSS盒子模型（Box Model）。在所有的HTML元素都可以看成一個盒子；在CSS中，Box Model這一術語被用來設計和布局中使用。
現在已知的有兩種盒模型，W3C盒模型（标準盒子）和IE盒子模型（怪異盒子）。
W3C盒模型（标準盒子）和IE盒子模型（怪異盒子）分别是什麼？
W3C盒模型，也就是标準盒子模型：
寬度=内容的寬度（content）+ border + padding + margin
IE盒子模型，也就是怪異盒子模型：
寬度=内容寬度（content+border+padding）+ margin
為什麼叫IE盒子模型呢。是因為在低版本的IE中盒子使用的都是border-box。後期IE5.5、IE6及其以後，盒模型都為content-box。注意：當浏覽器未設定<!doctype>聲明時，盒模型都為border-box。
IE 盒子模型的範圍也包括 margin、border、padding、content，和标準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。IE盒模型 box-sizing: border-box
通過 css3 的box-sizing屬性，可以更改元素的盒子模型。标準 W3C 盒子模型的範圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。
box-sizing屬性？
用來控制元素的盒子模型的解析模式，預設為content-box
content-box：W3C的标準盒子模型，設定元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設定元素的height/width屬性指的是border + padding + content部分的高/寬