视觉格式化模型
你有没有碰到过这种场景：页面精心排版，效果却怎么都达不到理想；自己加了一堆 CSS 样式，调来调去还是一头雾水，搞不清到底是哪条规则起了作用。其实，CSS 的视觉格式化模型非常灵活强大，同时又有点“谜”，网上、书本上没法把所有情况和组合都写全。 你以后多敲几次代码，肯定会遇到各种没想到的 CSS 表现。但只要我们能明白视觉格式化模型背后到底是怎么工作的，出了问题时，才能快速分辨这到底是 CSS 的设计本意，还是哪块真的写得不对。
说白了，理解 CSS 的视觉格式化模型，就像学会说话要掌握语法一样基础。我们得先弄清楚：一个页面里，每个元素到底是怎么被浏览器理解、如何最终显示出来的。 只有理解了这些底层原理，才能写出漂亮高效又不容易“踩坑”的 CSS。本节课我们就来聊聊：CSS 究竟是怎么把文档变成屏幕上看到的效果的，以及这里面到底遵循了哪些基本规则。
掌握 CSS 的视觉格式化模型，能够帮助我们更好地理解为什么某些样式规则会产生特定的效果，以及当布局出现问题时应该从哪个角度去排查和解决。
实验室
在我们进入理论知识之前，我们先来通过一个实验室来感受一下视觉格式化模型。
基础盒子模型
简单来说，CSS 认为：页面上的每个元素，其实就是一个“盒子”。目前，这些盒子都是矩形的（以后规范可能会支持更多形状，但现在还没实现），整个 CSS 布局的基础就是围绕这些“盒子”来展开的。
每个盒子中间是内容区域，内容外面一层一层包着：内边距（padding）、边框（border）、轮廓（outline）、外边距（margin）。这些区域其实都可以不要——只要你把它们的数值设成 0 就可以了。搞清楚它们的层次和作用，就能让你更容易理顺 CSS 布局，写起来也更顺手。
在搞清楚这些属性到底怎么让元素变大变小时，我们先得认识几个常用的术语。别怕，这些东西其实没那么抽象，说白了就是帮你读懂 CSS 布局时用的“专有名词”——搞明白这些，后面遇到乱七八糟的布局问题也能顺利看懂思路。
包含块的概念
这里还有一个很重要但经常让人疑惑的角色——“包含块”（containing block）。你可以把它理解为，每个元素布局时的参考系，像画画时的画布。CSS 规定，每个盒子（元素）都是根据某个“包含块”来计算它的位置和尺寸的。
那谁是“包含块”呢？说人话就是：一个元素如果是块级或者列表项盒子，它的最近的父级块盒子的内容区边缘就成了它的“包含块”。也就是说，盒子之间其实像叠积木一样，每一级都要靠上一级来决定自己该放哪儿。
我们举个具体的例子，一看就明白。假设我们有这样的 HTML 结构：
|<!DOCTYPE html> <html> <head> <style> body { border: 2px solid blue; padding: 20px; } div { border: 2px solid green; padding: 15px; }
在这个例子里，<p> 元素的块盒子的“包含块”其实就是它外围的 <div> 的块盒子。因为 CSS 会让每个块级盒子根据它最近的父级块盒子（或者列表项盒子）来定位和尺寸。也就是说，<p> 的布局得看 <div>，而 <div> 的布局又是跟 <body> 元素“挂钩”的。
继续往上走，<body> 的布局还要参考 <html> 元素。而 <html> 这个根节点的盒子，其实创建了“初始包含块”（initial containing block）。有意思的是，这个初始包含块的大小不是由 HTML 内容本身决定，而是取决于浏览器窗口（屏幕上的话是 viewport，打印时则是页面能打印的范围）。
所以，哪怕内容没铺满窗口，初始包含块还是整个视口大小。多数情况这影响不大，但一碰上定位（比如用 position: fixed）或者用视口单位的时候，这个区别就很关键了。
元素显示方式的改变
通过调整 CSS 的 display 属性，我们可以精确控制元素在页面上的展示方式。这个属性不仅影响元素的外观，更直接决定元素如何在页面布局中“排队”或者“换行”，对整体布局结构起着关键作用。
display
display 属性可以理解为 HTML 元素的“表现模式”开关。它负责告诉浏览器：这个元素要生成哪种盒子，它和周围其他元素该怎么协作。改变 display 的值，就能让同一个元素拥有完全不同的布局效果。
举个简单的例子，比如一个导航栏，里面放着一组链接。默认情况下，<a> 是内联元素，多个链接会并排在同一行。如果我们需要它们垂直排列，让每个链接都单独占一行，其实很简单——只要用 CSS 把这些链接的 display 类型改成块级（block），它们就会像一个个段落一样从上到下依次排列开。
|<!DOCTYPE html> <html> <head> <style> nav a { display: block; } </style> </head> <body> <nav> <a href="#home"
通过设置 display: block，我们让每个链接生成了块盒子，而不是默认的内联盒子。这意味着每个链接现在都会占据整个可用宽度，并且在垂直方向上排列。这样做的好处是，整个链接区域都可以被点击，而不仅仅是文字部分，这大大改善了用户体验。
我们也可以反过来，将块级元素转换为内联元素。假设我们有一个无序列表，列表中的项目默认是垂直排列的。如果我们想让这些项目水平排列，并且用竖线分隔，我们可以将列表项设置为内联元素。这样，它们就会像普通文本一样横向排列，我们可以在它们之间添加分隔符。
|<!DOCTYPE html> <html> <head> <style> #tagList { list-style: none; padding: 0; } #tagList li { display: inline; border-right: 1px solid #ccc
需要注意的是，改变一个元素的 display 属性，主要会影响它在页面上的展示方式，而不会改变它本身属于块级还是内联的本质属性。比如，你可以把一个段落（本来是块级元素）用 CSS 显示成一条内联盒子，但它本质上仍然是段落；同样，像 <span> 这样本身是内联元素，可以放在段落里，但不应该去包住一个段落。
说“主要是影响展示”是因为，虽然 CSS 大多数时候只决定了页面的视觉效果，不动内容本身，但有些 CSS 属性（比如 display）确实会影响到页面的可访问性。举个栗子，把元素的 display 设置成 none，它不仅在页面上看不见，同时在辅助技术（比如屏幕阅读器）里也不会被读到。
又比如，如果你把 <table> 的 display 属性改成 grid，这个表格在屏幕阅读器和键盘导航里可能就不再当成一个数据表格来看了。这给依赖这些功能的用户带来不少麻烦。
块级元素的格式化
我们常说“块级元素”，比如 <div>、<p>、<h1> 这些，它们的表现一般都挺“规矩”：会独占一行，宽度默认拉满整个父容器。不过，有的时候你调整页面布局时，会发现块级元素不像想象那么“死板”。这其实和 CSS 中的布局方式、盒模型、方向轴密切相关。
大家总看到“块轴（block axis）”和“内联轴（inline axis）”这样的说法，刚开始可能有点拗口。其实可以通俗理解：块轴一般是主流书写方向上的“垂直方向”，内联轴则是“水平方向”；但注意，这里说的不是固定的左右和上下，而是和写字的方向有关。 比如中文和英文默认“左到右”，那内联轴就是横向，块轴就是竖向。但如果碰到竖排文本，轴的方向就倒过来了。
说到“块尺寸”和“内联尺寸”，其实就是内容盒子在这两条轴上的长度。以前我们直接说“宽度”、“高度”，但那是默认排版习惯下的说法。只是在 CSS 里，为了适配更多的排版方式（比如阿拉伯文、竖排日文），有了这些更“逻辑化”的尺寸表达，能让样式写得更灵活。
逻辑尺寸属性
CSS 提供了一组“逻辑尺寸属性”来单独设置块轴和内联轴的长度。常见的有 block-size 和 inline-size。分别代表：
block-size：控制块轴（比如竖直方向）有多长inline-size：控制内联轴（比如水平方向，决定内容一行能放多少）
这两个属性特别适合需要做多语言、多方向排版的场景。举个例子，你给一个元素写上 block-size: 500px，无论页面是横排还是竖排，块轴那一边的长度始终就是 500 像素，内容多就会溢出而不是自动变大。
再举一个实用的例子，假如你想让一个段落每行最多 25 个字符，不管排版方向是横向还是竖向，都可以用 inline-size: 25ch 来实现——这样浏览器会自动帮你在合适的地方换行，非常方便。
下面我们用一个例子看看 inline-size 的实际效果，帮助大家理解：
|<!DOCTYPE html> <html> <head> <style> .article { inline-size: 25ch; border: 1px solid #ccc; padding: 15px; margin: 20px auto; max-width
正如我们看到的，元素沿着内联轴尺寸一致，无论书写方向如何。如果我们将头侧向一边，可以看到换行发生在完全相同的位置。这在不同书写模式下产生了一致的行长。
使用 block-size 和 inline-size 等逻辑属性而不是 width 和 height 等物理方向属性，可以让你的设计在应用到翻译成其他语言的内容时自动调整布局意图。
内容尺寸的关键字
除了直接给元素设置具体的长度（比如 px、em、百分比等），我们还可以用一些“根据内容自动调整”的关键字来控制尺寸。这几个常用的关键字分别是：max-content、min-content 和 fit-content。它们听起来像有点抽象，其实用起来很直观，下面详细解释一下它们的作用——
max-content：就是让元素尽可能撑开，把所有内容都完整显示出来，不主动换行。比如一行很长的文字，元素会变宽，直到能把整句话都放下。min-content：和上面相反，元素会尽量“收缩”，宽度会变到刚好能显示出最长的一个单词（或者不允许再折行的最小宽度），让内容自动折行，效果有点像把所有内容挤在最窄的宽度里。fit-content：这个更像是两者的折中。元素会尽量适应内容大小，就像max-content一样，但有个“上限”，不会无限变宽，随着内容多了容器装不下时，会和外部容器边界对齐，或者在你设置的最大宽度处停止扩展。
如果你想灵活控制盒子的尺寸，或者内容是动态变化的，这些关键字就非常好用。用文字可能还有点抽象，我们用产品卡片的例子简单演示一下，直观看一下效果：
|<!DOCTYPE html> <html> <head> <style> .card-max { inline-size: max-content; border: 2px solid blue; padding: 15px; margin-bottom: 20px; }
最小和最大逻辑尺寸
如果你想要设置块或内联尺寸的最小和最大边界，CSS 有一些属性可以帮助你。min-block-size、max-block-size、min-inline-size 和 max-inline-size 属性在你想要设置元素盒子尺寸的上限和下限，并且愿意让浏览器在这些限制内做任何它想做的事情时非常有用。
例如，你可能想要限制任何嵌入在正常流中的图像为其固有尺寸，直到某个点。以下 CSS 会产生这样的效果：
|.article img { max-block-size: 2em; }
这样设置后，文章里的每个 <img> 图片的高度都会限制为文本字号的两倍，看起来就和文字大小更协调了，整体视觉效果会更舒服。
物理尺寸属性
如果你写 CSS 有一段时间，或者经常接触老项目，你可能很熟悉用“上、右、下、左”这种物理方向来考虑样式，比如上边距、左内边距一类。最早的时候，盒子模型的各种尺寸就是依赖这些方向写的，现在 CSS 虽然有了新的描述方式，但依然可以用这些物理属性。
比如，height 和 width 就是最常见的物理尺寸属性。无论你的页面是横着还是竖着写，height 指的就是元素从上到下（顶部到底部）的距离，width 就是从左到右的宽度。
如果你的页面是横向书写（比如中文、英文），而你同时给元素设置了 inline-size 和 width，默认情况下，后面写的会覆盖前面的。同理，block-size 和 height 也是同样的逻辑。如果你的书写方向变成竖排（比如日文竖排），那 inline-size 实际就等于 height，而 block-size 就等于 width。这点很容易理解，就是换了个角度看问题。
box-sizing 的影响
你会发现，不管是 height/width 还是 block-size/inline-size，默认情况下它们指的是内容区域（就是不算边框和内边距）。但有时候你可能会困惑，为什么我设置的宽高，实际看起来怎么还要加上边框和 padding 呢？这时候，我们可以用 box-sizing 属性，让尺寸变得更直观。
通过设置 box-sizing: border-box，你定义的尺寸就变成了“从边框到边框”的距离，padding 和 border 都包含在里面了。比如你写 inline-size: 400px 并加上 box-sizing: border-box，那整个盒子的宽度就是 400px，不会再加上边框和内边距，内容区域会自动变小一些。
下面我们通过一个简单的例子来说明这点：
|<!DOCTYPE html> <html> <head> <style> .box-content { inline-size: 300px; padding: 20px; border: 5px solid blue; background: #f0f0f0; margin-bottom: 20
你可以看到，这两个元素的总宽度其实并不一样。第一个元素用的是默认的 content-box，所以 300px 只是内容本身的宽度，还要再加上内边距（左右各 20px，共 40px）和边框（左右各 5px，共 10px）。所以总体加起来就是 300 + 40 + 10 = 350px。
而第二个元素用了 border-box，这时候设置的 300px 是整个盒子的宽度（内容+内边距+边框）。也就是说，总宽度就是 300px。要算内容区到底有多宽？就是 300 - 40 - 10 = 250px。
块轴相关属性
在 CSS 中，“块轴”通常指的是元素的垂直方向（默认从上到下）。针对块轴，常见影响布局的属性有七个，分别是：
自动块高
通常情况下，一个块盒子如果 block-size: auto，这时候它高度会刚刚好包住所有内容（比如文本行）。如果盒子里面只有块级子元素，也没有甚么额外的上下内边距或边框，那它的高度其实就是从第一个子元素的上边框边到最后一个子元素的下边框边的距离。
因为在块级元素里，子元素的外边距有“塌陷”现象（margin collapse），这个我们后面会提到。
当然，如果你又加了上下的内边距或边框，那总高度还要把这些都算进去。
百分比高度
如果你给块元素的高度设成比如 height: 50% 这种百分比，这个百分比指的是父元素的“块轴”高度。但一点要特别注意，如果父元素本身没明确指定高度（比如默认自适应内容），那么子元素的百分比高度其实是没法计算的，这时候会自动变成 auto。这也是为什么很多新手设置 height: 50% 没有效果的根本原因。
内容溢出咋办
有时候你定死了一个高度，内容却太多放不下，这时内容就会溢出来。不光块高，宽度上也可能溢出。这种情况我们可以用 overflow 属性来控制。
overflow 常见的取值有这些：
接下来，我们实际对比一下这些值的效果：
|<!DOCTYPE html> <html> <head> <style> .container { block-size: 150px; border: 2px solid #333; margin-bottom: 20px; padding: 10px; width:
单轴溢出
overflow 其实是由两个属性组成的，你可以分别控制水平方向（x轴）和垂直方向（y轴）的溢出表现。你可以直接用 overflow-x 和 overflow-y 分别设置，也可以用 overflow 一次性搞定两个方向。
比如，你给 overflow 写两个值，第一个表示水平方向，第二个表示垂直方向（顺序总是 x 后 y）。如果只写一个，那就俩方向一起用这个值。所以 overflow: scroll 其实等同于 overflow: scroll scroll，overflow: hidden 跟 hidden hidden 也是一个意思。换句话说，只写一个值就会同时作用于两个轴。
负边距和边距折叠
你可能想不到，其实边距还能设置成负数。简单来讲，负边距会让元素往盒子里面“缩”，有点像把它拉近了一点。我们直接用个例子来看看负边距到底是什么效果：
|<style> .normal { margin-block-start: 50px; border: 3px solid gray; background: #f0f0f0; padding: 15px; } .negative { margin-block-start: -50px; border: 3
我们可以看到，给段落设置负的块开始边距后，它会被整体向上拉。你也会发现，紧跟在这个段落后面的 <div> 内容也被一同往上挪了 50 像素。
负边距折叠
负边距的折叠规则和正边距有些不同。当一个负边距与相邻的正边距发生折叠时，浏览器会将负边距的绝对值与正边距相加（其实是用正值减去负值），得到最终的折叠边距。也就是说，正负边距会相互抵消，最后元素之间的距离就等于它们合起来的计算结果，哪怕这个结果是负数，也会直接表现出来。 例如，假设一个元素的下边距是 20px，紧接着的元素上边距是 -18px，这两者就会折叠，最后它们之间的空隙只剩下 2px（20px - 18px）。如果负边距更大，甚至可能出现元素间内容重叠的现象。
下面的例子中，列表项、无序列表和段落都设置了边距，通过分配负边距，你可以看到这种折叠效果：
|<!DOCTYPE html> <html> <head> <style> .box1 { margin-bottom: 20px; background: #e0e0e0; padding: 10px; } .box2 { margin-top: -18px; background: #ffe0e0; padding
最大幅度的负边距（-18px）被添加到最大的正边距（20px），产生 20px - 18px = 2px。因此，在列表项内容的块结束和 <h1> 内容的块开始之间只有 2 像素。
内联格式化
在网页中，块级元素（如 div、p）会把自己的内容包裹在一个“块盒子”里，像一块独立的积木排下去。不过，块级元素里的内容——比如一段纯文本、加了标签的单词或短语——它们之间是怎么排队、换行甚至对齐的呢？其实，这一切都跟“内联格式化”有关。
行布局
要理解内联内容如何排成一行，可以先想象有一个很长的句子放进了一个定宽的盒子里（比如一个段落）。网页会自动根据盒子的宽度，把内容分割成多行，让它们正好适应容器宽度。每当一行放不下更多内容时，就会自动换到下一行。这种把长文本分成多行的方法，实际上就是将内容拆分成可以沿着块流方向依次堆叠的片段。
如果给行内元素（如 span）添加背景色，就能直观看到每一行是如何放置的。需要注意的是，不是每一行都会刚好挨到容器的左右边缘——比如左对齐时，所有行都贴近左边，行尾根据分割处结束；右对齐和居中对齐时，规则会相应变化。
当 text-align 设置为 justify（两端对齐）时，每一行（除了最后一行）都会被拉伸到与段落内容一样宽，这时，字母和单词之间的间距会被调整，以让每行填满整个宽度。这种情况下，word-spacing（单词间距）可能会被覆盖，而 letter-spacing（如果是固定长度）则不会改变。
接下来，我们简单了解一下内联布局里经常出现的几个名词：
行高
每个元素（不管你有没有写出来）本身都有个 line-height 值。这个属性对内联元素和内联内容的显示效果影响非常大，非常值得关注。
一行的高度（也就是行盒子的高度），取决于里面所有内容的高度，尤其是文本和嵌套的元素。要注意的是，line-height 主要影响的是内联内容，对块级元素本身没啥直接效果。如果你把 line-height 写在块级元素上，它其实是影响块内的文本和内联内容。
比如，一个空段落：
|<p style="line-height: 0.25em;"></p>
如果段落里没有内容，它不会显示出来，所以你什么都看不到。不管 line-height 设置成多少，比如 0.25em 还是 25in，只要没有内容，没有行盒子被创建，效果都一样，看不到变化。
我们可以给块级元素设置 line-height，它会影响块内所有内容，无论是普通文本还是被标签包裹的部分。可以理解为，块级元素里的每一行都像有自己的“内联元素”，哪怕实际上没用标签包起来。
根据 CSS 规范，在块级元素上写 line-height，其实是给这个元素内每个行盒子设定了一个最小高度。比如写了 p.spacious {line-height: 24pt;}，意思就是每一行至少有 24pt 高。其实，只有真正用内联元素包裹时行高才能被继承，但大部分文本默认没包裹。你可以把每行想象成被虚构的行元素包着，这样理解模型会更直观。
下面我们看一个实际的例子，看看行高到底会怎样影响文本的显示效果：
|<!DOCTYPE html> <html> <head> <style> .tight { line-height: 1.2; font-size: 16px; margin-bottom: 30px; } .normal { line-height: 1.5;
内联非替换元素
先说说内联非替换元素，比如 <span>，还有我们平常打的直接文本。对于这种元素，它有多高，主要还是看 font-size，比如你设置成 15px，它的内容区域也就是 15px 高（同理，1em 也就是 15px）。
有了 font-size，接下来就要看 line-height 的值了。这两个值如果不一样，比如 font-size: 15px; line-height: 21px;，那 21px 和 15px 相差 6px。浏览器会把这 6px 平分，一半（3px）加在内容区域上方，一半（3px）加在下方，这样就形成了内联盒子。
如果你的行里内联元素大小不一，比如普通文本是 12px，但中间某个 <strong> 里的字大到 24px，但行高 line-height 还是 12px（因为继承了父元素的），那么也会出现类似分摊的情况。对于 12px 的文本，盒子高度正好 12px；对于 24px 那个，但行高还只有 12px，这个差值就是 -12px，两端都“减”6px。最后看起来，无论大字还是小字，内联盒子都是 12px 高。
可是大字的内容会比盒子高，被垂直居中在 24px 的内容区里，所以看起来有点“撑出去”。
设置垂直对齐
有时候，我们还会用 vertical-align 来微调内联元素在行内的垂直位置。比如你给 <strong> 加 vertical-align: 4px;，它整个就会上移 4px，包括它自己的内容和盒子。如果它已经是那一行里面最高的，这个调整会让整个行盒子的顶部也跟着上移。
vertical-align 有很多取值，比如：
top：让内联盒子顶部和当前行盒子的顶部对齐；bottom：对齐到底部；text-top/text-bottom：跟父元素的内容顶部、底部对齐；middle：盒子中线对齐到父元素基线之上 0.5ex；super、sub让文本上标、下标（具体偏移多少浏览器说了算）；- 指定像素或百分比时，就是上下偏移具体的距离。
管理行高
你可能发现，随便改一改内联元素的 line-height，有时候行和行就重叠了。这么做并不安全。那我们怎样保证内容不会重叠？最通用又省心的方式，就是用 em 或百分比配合 font-size。比如你改了 <strong> 的文字大小，可以单独给它加大 line-height，这样行盒子整体也会变高，就不会和别的文字挤在一起，同时其它行的 line-height 也不会被影响。
之前讲的行高、盒子等如果你都理解了，扩展起来就很方便。比如有时你想给链接加 5px 的边框，这时候行高太小就会挡到上下两行文字。你可以给整个段落或对应那一行加大 line-height，让边框有地方“放”，就不会覆盖到其它内容了，而不是一刀切所有行都改。
缩放行高
设置 line-height 的最佳方法是使用原始数字作为值。这种方法是最好的，因为数字成为缩放因子，该因子是继承的，而不是计算的值。假设我们希望文档中所有元素的 line-height 是其 font-size 的一倍半。我们将声明以下内容：
|body { line-height: 1.5; }
这个 1.5 的缩放因子从元素传递到元素，在每个级别，该因子用作每个元素 font-size 的乘数。在这个例子中，<small> 元素的行高结果是 15 像素，对于 <strong> 元素，是 45 像素。如果我们不想让大的 <strong> 文本产生太多额外的行距，我们可以给它自己的 line-height 值，这将覆盖继承的缩放因子：
|p { font-size: 15px; line-height: 1.5; } small { font-size: 66%; } strong { font-size: 200%; line-height: 1em; }
使用无单位的数字值设置 line-height 是最佳实践，因为它作为缩放因子继承，每个元素都会根据自己的 font-size 自动计算合适的行高。
给“非替换”内联元素加盒模型属性会怎样？
还记得我们之前讲的吗？其实内联元素（比如 <span>、<a> 这种，不是图片、视频那种“替换元素”）虽然也能加内边距（padding）、外边距（margin）和边框（border），但这些属性并不会影响“这行”有多高。
简单说，内联元素的边框大小其实只跟 font-size 有关，跟 line-height 没关系。比如一个 <span> 设置了 font-size: 12px，哪怕它的 line-height 设成 36px，span 的内容区就是 12px 高，边框就包在这高度外面。
你当然可以给内联元素加 padding，这样边框会离文字远一些，但这并不会让行高变大。给它加边框也是同理：样子变了，行的高度还是老样子。
外边距就更有意思了。它不会影响“这行”本身的高度，但在内联的开始和结尾（左右），margin 是会起作用的。所以你要是给 <span> 左右加 margin，它会把内容推开，左右距离变宽。负 margin 还能把文字拉近，甚至挤到一块，注意可能会重叠。
如果你加了背景色和较大的内边距，可能会导致上下两行的背景色出现重叠。CSS 规定行盒子是顺序绘制的，所以后面的行可能会把上面那一行的边框或文字覆盖掉，背景也是一样的效果。
改变换行时的表现：box-decoration-break
平时呢，内联元素如果内容太长，会像“绳子”一样自动被拆分成几段（比如一半在上一行，一半掉到下一行）。但有时候你想改变这种默认的断行效果，可以用 box-decoration-break 属性。
默认的 slice 就是我们最常见的情况：断行时，内边距、边框、背景都只算一次。还有个叫 clone 的值，则会让每一段断开的内容都像一个新盒子一样：每一段都有自己的 padding、border、背景图，哪怕中间刚好断开，效果都不会被截断。
这主要用在内联盒子上，但遇到多列、多页等被切分的场景下也适用。比如分页打印或者多栏，设置 box-decoration-break: clone 后，无论断在哪里，每个部分都会有完整的盒子样式。
字体、字形与内容区
你可能发现，有些字体显示出来就是跟想象的不太一样，其实是因为字体的 em 盒子（也就是 font-size 显示的高度）和实际字形并不完全“齐”。这会影响到内联元素的背景显示，甚至在你明明设了 line-height: 1em 后，还是可能出现背景重叠的情况。
具体会不会重叠，取决于浏览器（渲染引擎）到底用“字体 em 盒子”还是“实际字形”来算“内容区域”。不同浏览器结果不一样，所以有时候你会发现一些内联元素的背景色在不同浏览器下不一样高。
内联替换元素
这种元素，比如 <img> 图片，就是自己本身有宽高（比如一个图片有 300px × 200px），跟文字没啥直接关系。这时候，图片的盒子也会影响这一行的高度。保证图片（或别的替换元素）能完全露出来，行盒子会自动变高。
不过，别搞混了，这并不会改变 line-height 的值。图片本身和行的 line-height 是互不影响的。可以理解为，只是行盒子够大“包住”了图片而已。
虽然这些元素一般没内边距、border，但如果加了（比如你用 CSS），它们就真的会算进盒子去，行高也会跟着变。
图片一样可以有 line-height，主要是为了配合 vertical-align（垂直对齐）这种属性时需要计算。如果没有 line-height，比如 vertical-align: 50% 就没法对齐。所以，图片高度其实和 vertical-align 没啥关系，计算全靠 line-height。
给替换元素加盒子属性
对于 <img> 这种内联替换元素，你可以像往常一样加 padding、border，渲染出来也是正常包住图片或内容；这些会让盒子（以及行盒子）变高。如果你给它设置 margin，正 margin 会让盒子更高，负 margin 则让盒子缩小，甚至能往上或往下覆盖别的内容（比如照片压到其它行文字上）。
负外边距通常可以让图片溢出自己的行，跑到别的行里，这种效果很常见。如果你觉得图片和行之间的关系很像 inline-block，其实没错，就是这么回事。
替换元素和基线对齐
默认情况下，内联图片是在基线上对齐的。比如在一行文字里插图片，图片的底部会贴着文字的基线。如果你给图片设置了底部 padding、margin 或 border，图片内容其实会被往上“顶”一些。图片没有自己的基线，所以浏览器默认用图片的底边来对齐基线。
这样做会导致一个小问题：比如你在表格单元格里只放了一张大图片，哪怕里面啥文字都没有，这一格也会高到能把图片完整容纳进来。这种行为不仅仅发生在表格里面，任何只包含图片的块级元素都会有这个效果。
还有个小趣事：如果你给图片加了负的底部 margin，图片其实会往下“掉”，甚至压住下一行的文字。这种手法有时会用来做特殊的视觉效果。
inline-block
inline-block 这个名字，就是“内联 + 块级”的意思。它结合了两者的特性：在外部看起来像普通图片一样融入一行内（不会换行），但内部排版、布局却很像块级元素。
比如你给元素设置了 display: inline-block，它在页面上会像个图片那样跟其他内联内容同居一行；但你可以像块元素那样给它设置宽高、内外边距、边框，而且这些值会起作用。只要高度比周围内容高，这一行的高度就会跟着变高。
我们来看个例子，就一目了然：
|<style> .block { display: block; inline-size: 200px; text-align: center; border: 2px solid blue; padding: 10px; margin-bottom: 10px; } .inline
请注意，在第二个示例中，段落被设置为 display: inline，这意味着该段落会作为普通的内联元素处理，此时 width 和 text-align 这些属性不会生效（因为它们对内联元素无效）。
而在第三个示例中，段落采用了 display: inline-block，这时 width 和 text-align 都会被正常应用，因为内联块元素既可以像块元素那样设置尺寸和对齐，也可以与文本内容在同一行排列。另外，内联块元素设置的外边距会影响它所在行的高度，表现得类似图片这样的“替换元素”，能够撑开行高。
如果没有显式设置宽度，或者将宽度设置为 auto，内联块元素的盒子会根据其内容自动收缩，仅够包住内容本身，不会比内容宽。普通的内联盒子同样如此，不过内联盒子可以在行内自动换行分布，而内联块元素不会在内容内部分行，必须整体留在同一行，除非遇到换行。
Flow布局模式
这里需要澄清一下 display 的 flow 和 flow-root 取值。当你为元素指定 display: flow 时，相当于让它采用标准的“块+内联”布局模型，这跟普通块级元素行为完全一样。只有在 display: inline flow 这种组合下，它才作为内联盒子出现。
比如，下面三条 CSS 规则的区别在于：前两条（flow 和 block flow）都会生成块盒子，第三条（inline flow）则生成内联盒子：
|#first { display: flow; } #second { display: block flow; } #third { display: inline flow; }
之所以有这种写法，是因为 CSS 规范正在逐步转向“双层显示类型”（two-level display type）模型，即把“显示类型”细分为“外部显示类型”和“内部显示类型”。block、inline 这样的关键字属于“外部显示类型”，决定了元素本身如何与页面中其他内容进行布局；而像 flow 这种就是“内部显示类型”，用于描述元素内部的子元素如何排列和格式化。
这种设计，让我们可以写出如 display: inline block 这样的组合声明，意思就是该元素在外部表现为内联元素，但在其内部却用块布局——也就是内部可以包含块级内容，这跟 inline-block 效果一致，只是使用了更细粒度、专业的表达。
而 display: flow-root 则专指生成一个独立的块格式化上下文（BFC），通常用在像 <html> 这样的根元素或其他需要“新上下文”的场景。这种写法确保当前元素内部形成新的布局隔离区。
你不用担心以前的 display 写法失效，所有传统值依然支持，并且有明确等价关系：比如 block 实际等价于 block flow，inline 等价于 inline flow，inline-block 则等价于 inline flow-root，还有 list-item 相当于 list-item block flow，等等。
内容显示
display 新增的一个非常实用的值是 contents。当一个元素使用 display: contents 时，该元素自身会从页面渲染结构中消失（不会生成自己的盒子），它的所有子元素会提升到跟父级同一层级进行渲染。举个简单例子，下边是常见的 HTML 结构：
|<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
如果我们然后向 <ul> 元素应用 display: contents，用户代理将渲染列表，就好像 <ul> 和 </ul> 行已从文档源中删除。列表项仍然是列表项，并且像它们一样工作，但从视觉上看，<ul> 消失了，就好像它从未存在过一样。
不仅列表的边框消失了，而且通常将列表与周围内容分开的顶部和底部外边距也消失了。
元素可见性
除了上面介绍的这些属性，其实你还可以简单地控制一个元素是不是“能看见”。
visibility
设置 visibility: visible，元素就会正常显示，这没什么特别的，就是“看得见”。如果你写成 visibility: hidden，那这个元素就会“藏起来”，但其实它还在页面上占着空间，只是看不到而已，也会照常影响布局，相当于隐身了。
跟 display: none 不一样，display: none 是让元素彻底“消失”，不仅看不到，它在页面上也不再占空间，好像根本就没写过这个标签。再强调一下，visibility: hidden 只是“看不见”，但位置还在；display: none 是连“位置”都没有了，页面完全当它不存在。
用个例子说明区别：
|<style> .visible { visibility: visible; } .hidden { visibility: hidden; } .none { display: none; } p { border: 2px solid #333;
当你用 visibility: hidden 隐藏一个元素时，这个元素的内容、背景和边框都会消失不见，但它原本占用的空间依然保留在页面上。也就是说，元素还在文档流中，只是“看不见而已”。
有时你希望隐藏的元素内部某个子元素仍然显示，这时可以将这个子元素单独设置为 visibility: visible。因为 CSS 的 visibility 属性具有继承性，后代元素会继承祖先的可见性状态，但你可以手动覆盖，实现局部显示。
关于 visibility: collapse，它主要用于表格和弹性盒模型（flexbox）中。在表格里，设置为 collapse 的行或列会彻底折叠，不仅内容和样式消失，占位空间也被移除。这和 display: none 很像，但区别是，表格布局在折叠行/列时，仍然会用被折叠单元格来确定表格整体的行列结构和宽高，有利于灵活增删行列而不触发表格的大范围重绘。
如果把 collapse 用在非表格或非弹性盒子元素上，它的作用和 hidden 一样——看不见但仍然占空间。
可见性的动画
理论上，visibility 属性可以被动画（transition）过渡。但实际上，它不会像透明度（opacity）那样逐步出现或消失，而是在动画进度到特定阈值时“突然切换”可见性。
也就是说，如果你把元素的 visibility 从 hidden 动画到 visible，元素会在整个动画过程中一直不可见，直到动画结束，才瞬间显示出来。
如果你希望元素实现平滑的淡入淡出效果，推荐动画 opacity（透明度），而不是直接动画 visibility 属性。当然，动画的内容是我们后面才会接触的。现在只要稍作了解即可。
小结
虽然 CSS 格式化模型的某些方面一开始可能看起来违反直觉，但随着你更多地使用它们，它们开始变得有意义。在许多情况下，看似无意义甚至愚蠢的规则实际上是为了防止奇怪或不良的文档显示而存在的。 块级元素在许多方面易于理解，影响它们的布局通常是一项简单的任务。另一方面，内联元素可能更难管理，因为多个因素起作用，其中最重要的因素之一是元素是替换的还是非替换的。
在实际开发中，我们会遇到各种各样的布局挑战。有时候，理解这些基本概念可以帮助我们快速定位问题所在。例如，当我们发现一个元素的高度不符合预期时，我们首先应该检查它的包含块是否有明确的高度，因为百分比高度需要明确的父元素高度才能计算。 当我们发现两个元素之间的间距比预期的小时，我们应该考虑是否发生了边距折叠。
随着 CSS 的发展，新的布局方式如弹性盒子和网格布局被引入，它们提供了更直观和强大的布局能力。但理解这些传统的格式化模型仍然非常重要，因为它们是 CSS 的基础，也是许多现代布局技术的底层原理。无论是使用传统的块级和内联布局，还是使用现代的弹性盒子或网格布局，理解元素如何被转换为盒子以及这些盒子如何相互作用，都是我们作为前端开发者必须掌握的核心技能。
实战练习
练习1：盒子模型理解
请解释CSS盒子模型的基本组成部分，并说明它们之间的层次关系。
CSS盒子模型从内到外依次包括：
- 内容区域（content area）：元素实际内容的区域
- 内边距（padding）：内容区域周围的空白区域
- 边框（border）：包围内边距的线条
- 外边距（margin）：盒子与其他元素之间的空白区域
层次关系：内容 → 内边距 → 边框 → 外边距
练习2：包含块概念
在一个HTML页面中，<body> 元素的包含块是什么？<div> 元素的包含块又是什么？
<body>元素的包含块是初始包含块，其大小通常等于浏览器视口（viewport）的大小<div>元素的包含块是其最近的块级祖先元素的内容区域边缘（通常是<body>的内容区域）
练习3：display属性应用
如果要让导航栏的链接项垂直排列，应该使用哪个display值？如果要让这些链接水平排列且用竖线分隔，又该如何设置？
- 垂直排列：使用
display: block - 水平排列并用竖线分隔：
|
a { display: inline; border-right: 1px solid #ccc; padding-right: 10px; margin-right: 10px; } a:last-child { border-right: none; }
练习4：逻辑尺寸 vs 物理尺寸
解释 inline-size 和 width 的区别，并说明在什么情况下应该使用逻辑尺寸属性。
inline-size是逻辑尺寸属性，表示内联方向的尺寸width是物理尺寸属性，表示水平方向的宽度- 在多语言布局（尤其是书写方向不同的语言）或响应式设计中，应该使用逻辑尺寸属性，因为它们会根据书写模式自动调整方向
练习5：内容尺寸关键字
解释 max-content、min-content 和 fit-content 的区别，并举例说明各自的适用场景。
max-content：元素会尽可能宽，内容不会换行，适合标题或需要完整显示的短文本min-content：元素会尽可能窄，只够容纳最长不可断开的单词，适合标签或按钮fit-content：介于两者之间，内容会换行但不会无限扩展，适合文章段落或卡片内容
适用场景：
max-content：导航菜单、标题min-content：标签云、按钮组fit-content：文章内容、产品描述
练习6：box-sizing的影响
解释 content-box 和 border-box 的区别，并说明何时应该使用 border-box。
content-box：width/height只包含内容区域border-box：width/height包含内容、内边距和边框
应该在需要精确控制元素总尺寸、避免内边距和边框影响布局计算时使用 border-box。这是现代CSS开发中的最佳实践。
练习7：负边距应用
解释负边距的作用，并说明它可能产生什么视觉效果。
负边距会让元素向相反方向移动，可能产生以下效果：
- 元素重叠：负边距会让元素向内收缩，可能覆盖其他元素
- 增大包含块：负外边距会让父元素看起来更大
- 特殊的布局效果：如让元素超出容器边界或与其他元素重叠
注意：负边距不会改变元素内容的尺寸，只会改变元素盒子的位置。
练习8：行高计算
如果一个段落的 font-size 是 16px，line-height 是 1.5，那么该段落的行高是多少像素？
行高 = font-size × line-height = 16px × 1.5 = 24px
这个24px就是行盒子的高度，内容会在这个高度范围内垂直居中对齐。
练习9：内联元素盒模型
给内联非替换元素（如 <span>）添加padding、border和margin时，会如何影响行高？
- padding和border：会增加元素的视觉尺寸，但不会影响行盒子的高度
- 左右margin：会影响元素之间的水平间距
- 上下margin：不会影响行高，但可能导致背景重叠或内容重叠
行高主要由 line-height 和 font-size 决定，而不是由内联元素的盒模型属性决定。
练习10：inline-block特性
inline-block 元素有哪些特性？它与 inline 和 block 元素有什么区别？
inline-block 特性：
- 外部表现为内联元素，可以与其他内容同行排列
- 内部表现为块级元素，可以设置width、height、padding、margin等
- 不会像纯内联元素那样在内容中换行
- 会受到
vertical-align属性影响
区别：
inline：不能设置宽高，内容可换行block：独占一行，默认宽度100%inline-block：可设置宽高，与其他内容同行，不在内容内换行
练习11：可见性控制
visibility: hidden 和 display: none 的区别是什么？
visibility: hidden：元素不可见但仍然占据空间，影响布局display: none：元素完全从文档流中移除，不占据空间，不影响布局
选择使用哪个取决于是否需要保留元素占用的空间。
练习12：边距折叠
在正常流中，相邻的两个块级元素如果都设置了margin，会发生什么现象？
会发生边距折叠（margin collapse）：相邻元素的上下外边距会合并，取最大值而不是相加。
例如：
- 元素A：
margin-bottom: 20px - 元素B：
margin-top: 30px - 实际间距：30px（取较大值），而不是50px
练习13：overflow属性
解释 overflow: auto 和 overflow: scroll 的区别。
overflow: auto：只有当内容溢出时才显示滚动条overflow: scroll：无论内容是否溢出，都会显示滚动条（占位空间）
auto 更符合用户体验，scroll 则确保布局的一致性。
练习14：书写模式影响
在不同的书写模式下，inline-size 和 block-size 会如何变化？
- 水平书写模式（ltr/rtl）：
inline-size≈width，block-size≈height - 垂直书写模式：
inline-size≈height，block-size≈width
逻辑尺寸属性会根据书写方向自动调整，保证样式意图在不同语言环境下保持一致。
练习15：替换元素特性
内联替换元素（如 <img>）的高度如何影响行盒子的高度？
内联替换元素的固有尺寸会直接影响行盒子的高度：
- 如果图片高度大于当前行高，行盒子会自动增高以容纳图片
- 如果图片高度小于行高，图片会在行内垂直居中对齐
- 行盒子的高度 = max(行高, 替换元素高度 + 垂直margin/padding/border)
替换元素的高度独立于 line-height 计算。