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。
