css盒模型總結

盒子模型有兩種，分別是 IE 盒子模型（怪異盒模型）和標準 W3C 盒子模型。

先來看看咱們熟悉的標準盒子模型：

  

 

從上圖能夠看到標準 W3C 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分。

盒子總寬度/高度=width/height+padding+border+margin　

　

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

盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;

 

怎麼樣纔算是選擇了「標準 W3C 盒子模型」呢？

很簡單，就是在網頁的頂部加上 DOCTYPE 聲明。若是不加 DOCTYPE 聲明，那麼各個瀏覽器會根據本身的行爲去理解網頁，即 IE 瀏覽器會採用 IE 盒子模型去解釋你的盒子，而 FF 會採用標準 W3C 盒子模型解釋你的盒子，因此網頁在不一樣的瀏覽器中就顯示的不同了。

反之，若是加上了 DOCTYPE 聲明，那麼全部瀏覽器都會採用標準 W3C 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

 

在此基礎上介紹一下css3中的box-sizing屬性

box-sizing有兩個值一個是content-box，另外一個是border-box。

當設置爲box-sizing:content-box時，將採用標準模式解析計算，也是默認模式；

當設置爲box-sizing:border-box時，將採用怪異模式解析計算；

目前使用此屬性須要前綴以下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;