CSS盒模型

盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版和布局。盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。

盒模型的结构

1.content(内容):用来展示文字和图片

2.padding(内边距):内容与边框的距离

3.border(边框):元素的边框

4.margin(外边距):元素与元素之间的距离(父子元素,兄弟元素)

标准盒子模型：

包括margin、border、padding、content，并且 content 部分不包含其他部分。

也就是标准盒模型的宽度就是内容的宽度。

IE 盒子模型：

包括 margin、border、padding、content，和标准盒子模型不同的是IE 盒子模型的 content 部分包含了 border 和 pading。

举个栗子：

一个盒子的 margin 为 20px，border 为 5px，padding 为 10px，content 的宽为 200px，如果用标准 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2 +5*2+10*2+200=270px，盒子的实际宽度为：5*2+10*2+200=230px；如果用IE盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px，盒子的实际宽度依然是： 200px。

CSS3中有个属性:box-sizing，能改变盒子的模型标准:

border-box（IE盒模型 )

content-box（W3C盒模型）

怪异盒子模型

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。

当不对doctype进行定义时，会触发怪异模式。

在标准模式中，一个块元素的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式中，一个块元素的总宽度= width + margin(左右)（即width已经包含了padding和border值）

浏览器的兼容性问题

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。

解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。