浏览器盒模型和box-sizing属性

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。