认识盒模型

盒模型是用来表示每个元素所占用空间的大小。由 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。因为改变元素的实际大小往往是灾难性的。