标准盒模型和怪异盒模型

1.  下面是我们常见的盒子模型，它让我们知道一个盒子模型主要由content（内容），padding（内边距），border（边框）和margin（外边距）组成，页面上任何很多元素都可以看成是一个盒模型。但是图片、表单元素可以看作是一个文本，因为图片里并不能放其他东西。

2. W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

根据 W3C 的规范，元素内容占据的空间是由 width 和 height 属性设置的，而内容周围的 padding 和 border 值是不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE低版本浏览器在怪异模式中使用自己的非标准模型。这些浏览器的 width 和 height 属性不是内容的宽度/高度，而是内容、内边距和边框的宽度/高度的总和。

 

3. 两种模式下，怎么解决样式兼容性问题

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

 

4. 根据CSS3指定盒子模型种类

box-sizing: content-box;

宽度/高度为元素的content。在宽度/高度之外绘制元素的内边距和边框。

box-sizing: border-box;

元素设置的内边距和边框都在已设置的宽度/高度内进行绘制。通过从已指定的宽度/高度减去边框与内边距才是content真实的宽度/高度。

通过box-sizing属性可以设置盒模型的种类，content-box指定盒模型为W3C(标准盒模型)，boder-box指定盒模型为IE盒模型（怪异盒模型）