盒子模型

1、什么是盒子模型？
CSS盒子模型是CSS（层叠样式表）中的一个基本概念，它描述了将一个HTML中的元素渲染成一个矩形盒子，并定义了这些盒子之间的布局、大小和空间关系。每个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

（1）内容（content）：实际内容，显示文本和图像。其宽度和高度可以通过CSS属性 width 和 height 直接控制。
（2）内边距（padding）：指的是清除内容周围的区域。内边距是透明的，可以通过 padding-top、padding-right、padding-bottom 和 padding-left 分别控制上、右、下、左的内边距。
（3）边框（border）：围绕元素内容内容内边距的一条或是多条线，分别通过 border-width、border-style 和 border-color 控制。
（4）外边距（margin）：在元素外创建的额外区域。可以通过 margin-top、margin-right、margin-bottom 和 margin-left 分别控制上、右、下、左的外边距。

2、盒子模型分类
2.1 W3C标准盒子模型

W3C标准盒子模型.png

盒子总宽度 = width + padding + border + margin;
盒子总高度 = height + padding + border + margin
也就是，width/height 只是内容高度，不包含 padding 和 border值

2.2 IE怪异盒子模型

IE怪异盒子模型.png

盒子总宽度 = width + margin;
盒子总高度 = height + margin;
也就是，width/height 包含了 padding和 border值

3、CSS如何设置两种盒模型？

//在不设置box-sizing的情况下，box-sizing 默认是(标准盒子) content-box .
/* 标准模型 */
box-sizing:content-box;

/IE模型/
box-sizing:border-box;