盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。

                 標準 W3C 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。

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

例如一個盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解釋，那麼這個盒子模型佔用的

 寬度為：20*2+10*2+10*2+200=280px; 

  高度：20*2+10*2+20*2+50=130px;

 盒子的實際寬度大小為:10*2+10*2+200=240px;

 實際高度：10*2+10*2+50=90px;

用ie的盒子模型解釋 ：

盒子在網頁中佔據的大小為   20*2+200=240px;  高：20*2+50=90px;

盒子的實際大小為：寬度:200px, 高度:50px;

W3C 最後為了解決這個問題，在 CSS3 中加了 box-sizing 這個屬性。當我們設定 box-sizing: border-box; 時，border 和 padding 就被包含在了寬高之內，所以，為了避免你同一份 css 在不同瀏覽器下表現不同，最好加上：

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

這裡還有兩種特殊情況：

• 無寬度 —— 絕對定位（position: absolute;） 元素
• 無寬度 —— 浮動（float） 元素

它們在頁面上的表現均不佔據空間（脫離普通流，感覺像浮在頁面上層一樣，移動它們不影響其他元素的定位）。