乐趣区

认识盒模型

盒模型是用来表示每个元素所占用空间的大小。由 4 个区域组成,分别是内容区域、内边距区域、边框区域、外边距区域。这些区域分别对应了 5 个属性:

  • widthheight,宽度和高度
  • padding内边距
  • border边框
  • margin外边距

代码演示:

div{
  border:1px solid red;
  height:200px;
  width: 200px;
  padding: 40px;
}

效果图:

上面虽然指定了 widthheight200px,但实际上它的宽高是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。因为改变元素的实际大小往往是灾难性的。

退出移动版