CSS盒模型（Box Model）

閱讀目錄

    1. 什麼是CSS盒模型

    2. IE盒模型和W3C盒模型

    3. CSS3屬性box-sizing

    4. 關於盒模型的使用

---

    在最初接觸CSS的時候，對於CSS盒模型的不瞭解，撞了不少次的南牆呀。盒模型是網頁佈局的基礎，它制定了元素如何在頁面中顯示，若是足夠地掌握，那使用CSS佈局那將會容易得多。

1. 什麼是CSS盒模型

    盒模型，顧名思義，就是一個盒子。生活中的盒子，有長寬高，盒子自己也有厚度，能夠用來裝東西。頁面上的盒模型咱們能夠理解爲，從盒子頂部俯視所得的一個平面圖，盒子裏裝的東西，至關於盒模型的內容（content）；東西與盒子之間的空隙，理解爲盒模型的內邊距（padding）；盒子自己的厚度，就是盒模型的邊框（border）；盒子外與其餘盒子之間的間隔，就是盒子的外邊距（margin）。

    元素的外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）就構成了CSS盒模型。

圖1. 盒模型示意圖

2. IE盒模型和W3C盒模型

    CSS盒模型分爲IE盒模型（圖2）和W3C盒模型（圖3）。其實，IE盒模型是怪異模式（Quirks Mode）下的盒模型，而W3C盒模型是標準模式（Standards Mode）下的盒模型。

    IE6及其更高的版本，還有如今全部標準的瀏覽器都遵循的是W3C盒模型，IE6如下版本的瀏覽器遵循的是IE盒模型。

圖2. IE盒模型

 

圖3. W3C盒模型 

    從上圖直觀的能夠看出，IE盒模型的寬度或者高度計算方式爲：width/height = content + padding + border，W3C盒模型的寬度或者高度計算方式爲：width/height = content。

    舉一個簡單的例子：一個div的寬度和高度爲100px，內邊距爲10px，邊框爲5px，外邊距爲30px。圖4爲不一樣模型下顯示的結果，W3C盒模型下顯示的div所佔的總寬度和總高度（包括外邊距、邊框、內邊距、內容）爲100 + 10 + 5 + 30 = 145px，IE盒模型下顯示的div所佔的總寬度和總高度（包括外邊距、邊框、內邊距、內容）爲100 + 30 = 130px。很明顯的區別，若是元素的寬度（width）必定的狀況下，W3C盒模型的寬度（width）不包括內邊距和邊框，IE盒模包括。

    代碼以下：

<style>
  .content {background: #eee; height: auto;border: 1px solid blue;}
  .div {width: 100px;height: 100px;margin: 30px;padding: 10px;border: 5px solid blue;}
  .div-01 {background: orange;}
  .div-02 {background: yellow;box-sizing: border-box;}
</style>

<div class="content">
  <div class="div div-01">div01</div>
  <div class="div div-02">div02</div>
</div>

    頁面效果以下：

圖4. 區別

3. CSS3屬性box-sizing

    若是計算一個盒子的長寬高，咱們通常都是盒子自己的厚度加上盒子裏的空間大小，所在在IE盒模型和W3C盒模型，咱們會以爲IE盒模型更符合邏輯。

    不一樣的人有不一樣的習慣，因此CSS3新增了一個屬性box-sizing: content-box | border-box | inherit，默認值爲content-box。若是值爲content-box，那元素遵循的是W3C盒模型；若是值爲border-box，那元素遵循的是IE盒模型；若是值爲inherit，該屬性的值應該從父元素繼承。

4. 關於盒模型的使用

    有沒有人和我同樣，以爲屬性box-sizing真是個好東西，只需設置全部元素的該屬性爲content-box或者border-box，知足本身的習慣。

    雖然說如今的瀏覽器都兼容該屬性（如上圖），仍是得以防萬一，在屬性前最好暫時加-webkit-和-moz-前綴。

* {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

    在上圖，咱們看到IE兼容屬性box-sizing必須是8或者更高的版本，其餘瀏覽器均可以自動升級，兼容性不擔憂，那若是是IE七、IE6或者更低的版本，怎麼辦？還有，若是咱們不用該屬性，那瀏覽器該選擇哪一種盒模型呢？

    其實，瀏覽器選擇哪一個盒模型，主要看瀏覽器處於標準模式（Standards Mode）仍是怪異模式（Quirks Mode）。咱們都記得<!DOCTYPE>聲明吧，這是告訴瀏覽器選擇哪一個版本的HTML，<!DOCTYPE>後面通常有DTD的聲明，若是有DTD的聲明，瀏覽器就是處於標準模式；若是沒有DTD聲明或者HTML4一下的DTD聲明，那瀏覽器按照本身的方式解析代碼，處於怪異模式。

    處於標準模式的瀏覽器（IE瀏覽器版本必須是6或者6以上），會選擇W3C盒模型解析代碼；處於怪異模式的瀏覽器，則會按照本身的方式去解析代碼，IE6如下則會是選擇IE盒模型，其餘現代的瀏覽器都是採用W3C盒模型。

    由於IE6如下版本的瀏覽器沒有遵循Web標準，不論頁面開頭有沒有DTD聲明，它都是按照IE盒模型解析代碼的。