盒模型——標準盒模型與怪異盒模型
盒模型是CSS中一種重要的思維模型，理解了盒模型才能進行更好的頁面布局。顧名思義，我們把頁面上所有的元素都看做是一個生活中常見的盒子，它具備內容（content），內邊距（padding），邊框（border），外邊距（margin）四個屬性，也就是我們所謂的盒模型。
讓我們俯視這個盒子，它有上下左右四條邊，所以每個屬性除了內容（content），都包括四個部分：上下左右；這四部分可同時設置，也可分別設置；
內邊距（padding）可以理解為盒子裏裝的東西和邊框的距離，也可以想象成為了保護盒子裏的東西不被撞壞而填充的泡沫材料；邊框（border）有厚薄和顏色之分，也就是盒子本身了；內容（content）就是盒子中間裝的東西，比如元素，圖片，或者是祥禮品盒一樣一層套一層的小盒子。不過與現實中的盒子不同的是，現實中的盒子不能裝比它本身大的東西，會撐壞，但是CSS中的盒子是有彈性的，它不會被撐壞，只會被撐大；外邊距（margin）就是邊框外面自動留出的一段空白，也可以看做是盒子與盒子之間不能放得太擠，為了方便拿出了留有的空隙。
盒模型分為兩種：標準盒模型與怪異盒模型。
- 標準盒模型（ IE6及其更高的版本，還有現在所有標準的瀏覽器都遵循的是W3C標準盒模型）
標準盒模型：元素的寬度width=content的寬度，元素的高度height=content的高度
- IE盒模型（IE盒模型是怪異模式（Quirks Mode）下的盒模型，IE6以下版本的瀏覽器遵循的是IE盒模型。）
)
例子：如下圖所示，div1與div2都是width：100px；height：100px；padding：10px；border：5px；margin：30px；但給div2設置了box-sizing：border-box；所以它遵循IE盒模型。由此可以看出
div1占據的位置為100px+10px*2+5px*2+30px*2=190px；
div2占據的位置為70px+10px*2+5px*2+30px*2=160px；
盒模型的box-sizing屬性：
CSS3新增了一個屬性box-sizing: content-box / border-box / inherit，默認值為content-box。如果值為content-box，那元素遵循的是W3C盒模型；如果值為border-box，那元素遵循的是IE盒模型；如果值為inherit，該屬性的值應該從父元素繼承。
為了讓網頁能兼容各個瀏覽器，讓網頁在各種瀏覽器中都按標準盒模型解析，就要在網頁頂部增加DOCTYPE聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這就是盒模型的基本內容啦~
盒模型——標準盒模型與怪異盒模型