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