对盒模型的理解
... 2025-7-10 大约 7 分钟
在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
# 块级盒子（Block box） 和 内联盒子（Inline box）
在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。
这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为：
一个被定义成块级的（block）盒子会表现出以下行为：
盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width 和 height 属性可以发挥作用
内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。
如果一个盒子对外显示为 inline，那么他的行为如下:
盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。
我们通过对盒子 display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。
# 盒模型(Box Model)
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。
模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。
为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。
# 盒模型的各个部分
CSS 中组成一个块级盒子需要:
Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。
# 标准盒模型
在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。
padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
假设定义了 width, height, margin, border, and padding:
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
如果使用标准模型，宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)
padding 加 border 再加 content box。
注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到 margin。
# 替代（IE）（怪异）盒模型
你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因，css 还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).
默认浏览器会使用标准模型。
如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。
这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。
如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 <html> 元素上，然后设置所有元素继承该属性
Internet Explorer 默认使用替代盒模型，没有可用的机制来切换。(IE8+ 支持使用 box-sizing 进行切换)
# 外边距，内边距，边框
# 外边距
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。
外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。
无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。
我们可以使用 margin 属性一次控制一个元素的所有边距，或者每边单独使用等价的普通属性控制：
- margin-top
- margin-right
- margin-bottom
- margin-left
# 外边距折叠
块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
注意有设定 float 和 position=absolute 的元素不会产生外边距重叠行为。
有三种情况会形成外边距重叠：
同一层相邻元素之间
相邻的两个元素之间的外边距重叠，除非后一个元素加上 clear-fix 清除浮动。
没有内容将父元素和后代元素分开
如果没有边框 border，内边距 padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界 margin-top 与其内一个或多个后代块级元素的上边界 margin-top；或没有边框，内边距，行内内容，高度 height，最小高度 min-height 或 最大高度 max-height 来分开一个块级元素的下边界 margin-bottom 与其内的一个或多个后代后代块元素的下边界 margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。
空的块级元素
当一个块元素上边界 margin-top 直接贴到元素下边界 margin-bottom 时也会发生边界折叠。 这种情况会发生在一个块元素完全没有设定边框 border、内边距 padding、高度 height、最小高度 min-height 、最大高度 max-height 、内容设定为 inline 或是加上 clear-fix 的时候。
如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和,；也就是说如果有-13px 8px 100px 叠在一起，边界范围的技术就是 100px -13px 的 87px。
如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
以上这些内容都是发生在 Block-Level 的元素，设定 floating 和 absolutely positioned 的元素完全不用担心边界重叠的问题。
# 内部和外部显示类型
css 的 box 模型有一个外部显示类型，来决定盒子是块级还是内联。
同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。
默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样(如上所述)。
但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。（其他内部显示类型：grid）
如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex 该盒子的所有直接子元素都会成为 flex 元素，会根据 弹性盒子（Flexbox ）规则进行布局。
块级和内联布局是 web 上默认的行为 —— 它有时候被称为 正常文档流， 因为如果没有其他说明，我们的盒子布局默认是块级或者内联。
display 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。