基础盒模型各个区域的功能，由其边界决定，先上一张 MDN 文档的图

盒模型

图里很明显有四个边界

  • Content edge - 内容边界

  • Padding edge - 内边距边界

  • Border edge - 边框边界

  • Margin edge - 外边距边界

正好对应了四个区域

  • Content area - 内容区域

  • Padding area - 内边距区域

  • Border area - 边框区域

  • Margin area - 外边距区域

盒模型还分为标准盒模型和替代盒模型

  • 标准盒模型为默认值，box-sizing: content-box，width 和 height 表示内容区域(Content area)的宽高

  • 替代盒模型为 IE 的盒模型，box-sizing: border-box，宽高计算有所不同，这边的宽度为 width = contentHeight + padding + border-size，高度同理

Content area

由 内容边距 Content edge 限制，容纳元素**”真正的内容”**

真正的内容包括：文本、图像、视频播放器等等

我们给任意 <img /> 标签加上内边距，并设置背景色

1
2
3
4
img {
  padding: 16px;
  background-color: gray;
}

用浏览器调试工具即可看到内容区域是图片

内容区域

Content area 拥有背景色或背景图像，背景一般默认为透明

在标准盒模型下，使用 width,height 直接控制其尺寸

注意

行内元素的尺寸是由 line-height 决定的，即使边框和内边距仍会显示在内容区域周围

Padding area

由 内边距边界 Padding edge 限制，扩展自内容区域

用于填充元素内容和边框之间的内容，会延伸内容区域的背景

内容区域到边框区域的距离就是其尺寸，用 padding, padding-left/right/top/bottom 来控制

Border area

由 边框边界 Border edge 限制，扩展自内边距区域

作用跟其名称一样，用于容纳边框，其区域尺寸就是边框尺寸 border-sizing

重点来了，边框区域也会延伸内容区域的背景，但是边框会盖在背景之上

例如下面代码

1
2
3
4
5
img {
  padding: 16px;
  background-color: #d390d3;
  border: 4px transparent solid;
}

我们打开浏览器控制台，鼠标悬浮到 border 样式上查看其区域

边框区域

可以发现是盖在背景上的

Margin area

由 外边距边界 Margin edge 限制，用空白的区域扩展边框区域

用于和相邻的元素分开

其尺寸通过 margin, margin-left/right/top/bottom 控制

注意

需要注意的是，某些情况下相邻、父子元素之间会发生外边距重叠

主要有三种情况，并且触发前提是父子、兄弟元素都不是BFC

  • 相邻的两个元素之间的外边距重叠，除非后一个元素清除浮动

  • 在父元素没有 padding 和 border，导致父元素上方或下方的外边距边界和子元素上方或下方的外边距边界直接接触时，父子元素的上边距和下边距会分别合并

  • 当一个元素的上方外边距边界直接接触下方外边距边界，也会发生重叠，例如没有边框没有边距，且内容为行内元素撑不起内容区域高度时

盒模型分类

有两种盒模型

传统盒模型

例如有如下元素

1
2
3
4
5
6
7
8
.box {
  box-sizing: content-box;
  border: 10px solid gray;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: brown;
}

content-box 下 width 定义的是内容区域的宽度，也就是说，元素实际宽度为：

1
contentWidth(200px) + padding(20px)*2 + border-size(10px)*2 = 260px

怪异盒模型(IE)

例如有如下元素

1
2
3
4
5
6
7
8
.box {
  box-sizing: border-box;
  border: 10px solid gray;
  padding: 20px;
  width: 200px;
  height: 200px;
  background-color: brown;
}

border-box 下 width 定义的是内容 + 内边距 + 边框 的总宽度，也就是说元素的实际宽度就是 200px

内容宽度为：

1
width(200px) - padding(20px)*2 - border-size(10px)*2 = 140px

该属性会影响到 DOM 节点的宽高取值，宽高计算公式为 内容宽(高)度 + 内边距*2

上面例子中传统盒模型的 element.width 为 240px

怪异盒模型的 element.width 为 180px