盒模型是用来表示每个元素所占用空间的大小。由 4 个区域组成，分别是内容区域、内边距区域、边框区域、外边距区域。这些区域分别对应了 5 个属性：
-
width和height，宽度和高度 -
padding内边距 -
border边框 -
margin外边距
代码演示：
div{
border:1px solid red;
height:200px;
width: 200px;
padding: 40px;
}效果图：
上面虽然指定了 width 和height为200px，但实际上它的宽高是282px * 282px。
这是因为盒模型是content-box，它的宽高就是实际内容的宽高。增加内边距和边框不会影响内容区域的尺寸，但会增加元素的总尺寸。
使用 content-box 写样式时，不太符合人类理解，一般会通过设置 box-sizing 来改变它的盒模型。
使用 border-box，它的宽高就是元素的尺寸，也是内容区域宽高 + 内边距 + 边框。改变border 或者 padding 的大小会影响内容区的大小。
代码演示：
div {
box-sizing: border-box;
border:1px solid red;
height: 200px;
width: 400px;
padding: 40px;
}效果图：
从这个效果图中可以看到，元素总的宽高是400px * 200px，它的内容区域是318px。内容区域 + 内边距 + 边框正好为400px。
上面说到使用 border-box 人类理解。
这是因为，在实际开发中，如果你要保证元素实际占有的宽高不变，就要在写 width 时减去 padding，写padding 时减去width。因为改变元素的实际大小往往是灾难性的。