—————————————————————
一、什么是盒子模型(Box Model)
盒子想必大家都是知道的吧！
生活中我们的快递有盒子包装着，买的蛋糕也是有盒子包装着，我们的礼品也是被盒子包装着。
模型是什么呢？
它是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件
css中的盒子模型它是可以对元素进行布局，设置距离的大小，这里面包括含有外边距、边框、内边距和内容主体这四个部分。
二、CSS中的标准盒子模型(W3c标准的盒子模型)
CSS中的盒子模型也是主观意识借助实体或者虚拟表现构成客观阐述形态结构的一种表达目的的物件，在网页的实体中我们是看不见实际盒子模型的。但是我们能够清楚的看到它起到的作用。
1、盒子模型由” content(内容)+padding(内边距)+border(边框)+margin(外边距)“四个部分组成
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
2、标准盒子模型的计算
如图：
标准的盒子模型的大小是：content(区域内容大小)+padding(内边距)+border(边框)+margin(外边距)；
注：标准盒子的初始设置宽高大小不包含padding、border和margin的大小。
三、怪异盒子模型(IE标准的盒子模型)
1、怪异盒模型也叫IE盒子模型
怪异盒主要表现在IE内核浏览器中，当前大部分浏览器支持的是W3C的标准盒子模型，不过其他浏览器也保留了IE盒子模型的支持，需要在CSS中添加触发怪异盒的条件。
怪异盒子(IE盒子模型)的触发条件：
(1) 给元素添加CSS3属性box-sizing:border-box(注：所以如果用CSS3新属性，就不要考虑低版本浏览器了)
(2)文档结构的doctype不写，这个是在IE8 IE7 IE6 IE5等低版本上有，测试可以在win7系统上比较老旧的IE浏览器上，win10自带的新IE浏览器不可以。
2、怪异盒子(IE盒子模型)模型的计算
如图可见添加了怪异盒的div盒子宽度变小了。
标准的盒子模型的大小是：content(区域内容大小)+margin(外边距)；
注：怪异盒子的初始设置宽高大小包含padding、border大小在内，但不包含margin的大小。
1、盒模型与怪异模型的设置
当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
2、盒模型
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），
元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分，
这就是盒子模型。
在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin
3、怪异盒模型
在怪异模式下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin
目前盒子模型分为两种。（1）w3c标准盒子模型 （2）ie盒模型盒子模型分为 内容content + 内边距padding + 边框border + 外边距margin 四部分。
w3c标准盒子模型 与 ie盒模型 的区别：
标准盒子模型的 宽度width 和 高度 height 只包含 content内容部分，不包含padding内边距 和 边框border。
ie盒子模型 宽度width 和 高度 height 包含 内容+内边距+边框三部分。
