盒模型

盒模型

盒模型，可以简单解释为：盒模型用来描述元素所占据的空间。
有两种盒模型：W3C盒模型(标准盒模型)和IE盒模型

区别

这两种盒模型，主要区别是在解释元素的width和height属性上。
W3C盒模型认为：元素的with和height属性仅仅指content area。
IE盒模型认为：元素的with和height属性 由content area + padding + border组成。

使用方法

1.在IE6和以及更早的IE版本中，IE都采用了IE盒模型，从IE6开始提供了一种IE使用W3C盒模型的方式：在html中声明Doctype。即可避免使用IE盒模型。

浏览器的标准模式与怪异模式

2.但是， IE盒模型更符合人们的思考方式，所以W3C在css3.0中加入了box-sizing，用来修改css box model，默认值是content-box(W3C的盒子)，border-box值设置IE盒子

注意：

1.以前由于思考习惯和看到设计切的图以及在浏览器中看到实际的html页面等原因，错误的将元素的width、height属性当做元素的实际宽、高，经过这段时间的研究，终于对这个问题有了新的认识。由于margin始终是transparent(透明)，更容易在计算元素宽高时将其忽略掉。

2.设置元素的背景色background-color：包括content padding border，不包括margin
margin背景色始终为transparent
3.外边距合并(塌陷)(collapsing margin)
MDN - 外边距合并
4.box-sizing:padding-box ：
width 和 height 属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除。