image.png
- 盒模型屬性有：margin、padding、border、content
- 如圖所示：
- W3C盒模型的width指的是content區，而IE盒模型width指的是content+padding+border。
- 早期的IE（5.5版本）用的是IE盒模型，而從IE6開始，只要在文檔中聲明（添加doctype）則，兼容使用W3C盒模型。
- 如果IE678未添加doctype，即怪異模式，那么也是用IE模型。
從IE9以后，則不用填寫聲名也用的是W3C模型。
box-sizing屬性統一盒模型標準。
它主要用來控制元素的盒模型的解析模式。默認值是content-box。
- content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高。
- border-box: 讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content。
補充：
所有的盒模型，只要沒有添加doctype，都處于怪異模式，但此時，只有ie678使用ie盒模型，其他的雖然處于怪異模式，但仍舊使用標準模型，其實與普通模式效果相同,怪異模式是在ie6時代為了兼容ie5以及以前版本的瀏覽器保留的 現在實際使用中都使用標準模式添加doctype。
