CSS：标准盒子模型和怪异盒子模型---参考了其他文章

一、什么是盒子？

（1）它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件

（2）css中的盒子模型它是可以对元素进行布局，设置距离的大小，这里面包括含有外边距、边框、内边距和内容主体这四个部分。

二、什么是盒子模型？

（1）CSS中的标准盒子模型(W3c标准的盒子模型)

图中的width只包含content的width，

* 触发条件：标准盒模型的css属性设置是box-sizing：content-box

（2）怪异盒子模型(IE标准的盒子模型)

图中的width包含content的width + 左右padding + 左右border

怪异盒主要表现在IE内核浏览器中，当前大部分浏览器支持的是W3C的标准盒子模型，不过其他浏览器也保留了IE盒子模型的支持，需要在CSS中添加触发怪异盒的条件。

* 触发条件：
* 1.怪异盒模型的css属性设置是box-sizing：border-box
* 2.文档结构的doctype不写，这个是在IE8 IE7 IE6 IE5等低版本上有，测试可以在win7系统上比较老旧的IE浏览器上，win10自带的新IE浏览器不可以。