好的，让我们深入探讨 line-height 和 vertical-align 的基线计算机制。
剖析 line-height: 行高的奥秘
line-height 属性控制着文本行之间的垂直间距，但它的作用远不止简单地增加行间距。理解 line-height 的工作原理是掌握 CSS 布局的关键。
1. line-height 的值类型
line-height 可以接受以下几种类型的值：
normal: 这是默认值，浏览器会根据字体大小自动计算一个合理的行高。通常是字体大小的 1.0 到 1.2 倍，但具体值取决于字体本身。<number>(无单位数值): 行高是当前元素字体大小的倍数。例如，line-height: 1.5;表示行高是字体大小的 1.5 倍。这是推荐使用的方式，因为它具有更好的继承性。<length>(长度单位): 行高是一个固定的长度值，例如line-height: 20px;。<percentage>(百分比): 行高是当前元素字体大小的百分比。例如，line-height: 150%;与line-height: 1.5;效果相同。
2. line-height 的计算过程
line-height 的计算涉及到多个关键概念：
- Font Size (字体大小): 这是最基本的要素，
line-height的计算往往以此为基础。 - Content Area (内容区域): 围绕着每个字符的不可见的盒子。其高度由字体的设计决定，通常小于
font-size。 - Inline Box (行内盒子): 包含 Content Area 和额外的垂直空间，这个额外的垂直空间用于容纳半行距。
- Leading (半行距):
line-height和 Content Area 高度之差的一半，分别加到 Content Area 的顶部和底部。 - Line Box (行框): 包含一行中所有 Inline Boxes 的最小高度的盒子。行框的高度至少等于其内部最高的 Inline Box 的顶部到其最低的 Inline Box 的底部的距离。
- Baseline (基线): 一条假想的线，大多数字母都“坐在”这条线上。对于拉丁字母，基线通常是字母 x 的底部。
计算过程可以概括如下：
- 确定元素的
font-size。 - 确定元素的
line-height。 - 如果
line-height是<number>或<percentage>，则将其乘以font-size得到实际的行高。 - 计算 Leading:
Leading = (line-height - Content Area Height) / 2。 - 将 Leading 加到 Content Area 的顶部和底部，形成 Inline Box。
- 将所有 Inline Boxes 放入 Line Box 中。Line Box 的高度由最高的 Inline Box 和最低的 Inline Box 决定。
代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
font-size: 20px;
line-height: 1.5; /* 行高是字体大小的 1.5 倍 */
border: 1px solid black;
}
.content {
font-size: 30px;
line-height: 1;
}
</style>
</head>
<body>
<div class="container">
This is some text.
<span class="content">This is some taller text.</span>
More text here.
</div>
</body>
</html>在这个例子中，.container 的 font-size 是 20px，line-height 是 1.5，所以实际的行高是 30px。.content 的 font-size 是 30px，line-height 是 1，所以实际的行高是 30px。因此，即使 .content 中的文本字体更大，它仍然会保持在同一行中，并且其垂直方向的定位受到 line-height 的影响。
3. line-height 的继承
line-height 的继承行为取决于其值类型：
- 如果
line-height是<number>(无单位数值)，则继承的是这个数值本身，而不是计算后的值。这意味着子元素的行高是 子元素的字体大小 乘以这个数值。这是推荐使用<number>的原因，因为它更灵活，可以适应不同字体大小的子元素。 - 如果
line-height是<length>或<percentage>，则继承的是计算后的值。这意味着子元素的行高会保持与父元素相同，而 忽略子元素的字体大小。
代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
font-size: 20px;
line-height: 1.5; /* 继承的是 1.5 这个数值 */
}
.child {
font-size: 30px;
}
.parent2 {
font-size: 20px;
line-height: 30px; /* 继承的是 30px 这个值 */
}
.child2 {
font-size: 30px;
}
</style>
</head>
<body>
<div class="parent">
Parent text
<div class="child">Child text</div>
</div>
<div class="parent2">
Parent text
<div class="child2">Child text</div>
</div>
</body>
</html>在这个例子中，.parent 的 line-height 是 1.5，.child 的 font-size 是 30px。因此，.child 的实际行高是 30px * 1.5 = 45px。而 .parent2 的 line-height 是 30px，.child2 继承的是 30px 这个值，所以 .child2 的行高也是 30px，与它的字体大小无关。
4. line-height 与块级元素
line-height 主要影响行内元素（inline element）和行内块元素（inline-block element）。对于块级元素（block element），line-height 会影响其内部行内内容的垂直间距。块级元素的高度由其内容的高度决定，而内容的高度又受到 line-height 的影响。
代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
.block {
font-size: 20px;
line-height: 1.5;
width: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="block">
This is a block element. It contains some text that is affected by the line-height property.
</div>
</body>
</html>在这个例子中，.block 是一个块级元素，它的高度会根据其内部文本的行数和 line-height 计算得出。
深入 vertical-align: 垂直对齐的艺术
vertical-align 属性控制着行内元素或表格单元格内容的垂直对齐方式。它比 line-height 更复杂，因为它涉及到元素之间的相对定位。
1. vertical-align 的值类型
vertical-align 可以接受多种类型的值，包括：
baseline: 这是默认值，将元素的基线与父元素的基线对齐。top: 将元素的顶部与整行中最高元素的顶部对齐。middle: 将元素的垂直中心点与父元素的基线上方 0.5ex 处对齐。ex单位通常是字体 x 高度的一半。bottom: 将元素的底部与整行中最低元素的底部对齐。text-top: 将元素的顶部与父元素内容区域的顶部对齐。text-bottom: 将元素的底部与父元素内容区域的底部对齐。<length>: 将元素的基线上升或下降指定的长度值。正值表示上升，负值表示下降。<percentage>: 将元素的基线上升或下降相对于line-height的百分比。
2. vertical-align 的计算过程
vertical-align 的计算过程涉及到以下概念：
- Baseline (基线): 如前所述，是一条假想的线，大多数字母都“坐在”这条线上。
- Parent Baseline (父元素基线): 父元素的基线。
- Line Box (行框): 包含一行中所有 Inline Boxes 的最小高度的盒子。
- Font Metrics (字体度量): 包括字体的 ascent (上升部)、descent (下降部) 和 x-height (x 高度) 等信息。
计算过程因 vertical-align 的值而异：
baseline: 元素基线与父元素基线对齐。如果元素没有基线（例如，<img>元素），则元素的底部与父元素的基线对齐。top: 首先，确定 Line Box 的顶部。然后，将元素的顶部与 Line Box 的顶部对齐。middle: 将元素的垂直中心点与父元素的基线上方 0.5ex 处对齐。ex单位依赖于当前字体的 x-height。bottom: 首先，确定 Line Box 的底部。然后，将元素的底部与 Line Box 的底部对齐。text-top: 将元素的顶部与父元素内容区域的顶部对齐。text-bottom: 将元素的底部与父元素内容区域的底部对齐。<length>: 将元素的基线向上或向下移动指定的长度值。<percentage>: 将元素的基线向上或向下移动相对于line-height的百分比。
代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
font-size: 20px;
line-height: 30px;
border: 1px solid black;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
.baseline {
vertical-align: baseline;
}
</style>
</head>
<body>
<div class="container">
Text <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="50" height="50" class="top"> top
Text <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="50" height="50" class="middle"> middle
Text <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="50" height="50" class="bottom"> bottom
Text <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="50" height="50" class="baseline"> baseline
</div>
</body>
</html>在这个例子中，不同的 vertical-align 值导致图像相对于文本有不同的垂直对齐方式。
3. vertical-align 与表格单元格
vertical-align 也可以应用于表格单元格 (<td> 或 <th> 元素) ，用于控制单元格内容的垂直对齐方式。在这种情况下，vertical-align 会影响单元格内容相对于单元格边界的对齐方式。
代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 10px;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th class="top">Top</th>
<th class="middle">Middle</th>
<th class="bottom">Bottom</th>
</tr>
<tr>
<td class="top">This is some text aligned to the top of the cell.</td>
<td class="middle">This is some text aligned to the middle of the cell.</td>
<td class="bottom">This is some text aligned to the bottom of the cell.</td>
</tr>
</table>
</body>
</html>在这个例子中，表格单元格的内容分别与单元格的顶部、中部和底部对齐。
4. vertical-align 的限制
vertical-align 只能应用于行内元素、行内块元素和表格单元格。它对块级元素无效。对于块级元素，可以使用 margin 或 padding 等属性来实现垂直居中或对齐。
5. 容易混淆的点
vertical-align: middle并不意味着完全的垂直居中。如前所述，它将元素的垂直中心与父元素的基线上方 0.5ex 处对齐。要实现真正的垂直居中，可以使用其他技术，例如 Flexbox 或 Grid。vertical-align的行为可能会受到line-height的影响。如果line-height的值很大，可能会导致vertical-align的效果不明显。
6. 深入理解基线
基线是字体设计中的一个重要概念。不同字体可能具有不同的基线位置。这就是为什么在不同的字体下，即使使用相同的 vertical-align 值，元素也可能看起来不对齐的原因。
代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
font-size: 20px;
line-height: 30px;
border: 1px solid black;
}
.font1 {
font-family: Arial, sans-serif;
}
.font2 {
font-family: "Times New Roman", serif;
}
</style>
</head>
<body>
<div class="container">
<span class="font1">Arial Text</span> <span class="font2">Times New Roman Text</span>
</div>
</body>
</html>在这个例子中，由于 Arial 和 Times New Roman 字体的基线位置不同，即使它们在同一行中，也可能看起来不对齐。要解决这个问题，可以尝试调整 vertical-align 的值，或者使用其他布局技术。
7. 与 display: inline-block 的配合
vertical-align 经常与 display: inline-block 配合使用，以实现更灵活的布局。inline-block 元素既具有行内元素的特性（可以与其他元素在同一行显示），又具有块级元素的特性（可以设置宽度和高度）。
代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
font-size: 20px;
line-height: 30px;
border: 1px solid black;
}
.item {
display: inline-block;
width: 100px;
height: 50px;
border: 1px solid red;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
Text <div class="item">Item 1</div> Text <div class="item">Item 2</div>
</div>
</body>
</html>在这个例子中，.item 元素被设置为 display: inline-block，并使用 vertical-align: middle 将它们与文本垂直对齐。
表格：line-height 与 vertical-align 的对比
| 特性 | line-height |
vertical-align |
|---|---|---|
| 作用 | 控制文本行之间的垂直间距 | 控制行内元素或表格单元格内容的垂直对齐方式 |
| 适用元素 | 行内元素、行内块元素、块级元素 (影响内部行内内容) | 行内元素、行内块元素、表格单元格 |
| 值类型 | normal、<number>、<length>、<percentage> |
baseline、top、middle、bottom、text-top、text-bottom、<length>、<percentage> |
| 继承 | 取决于值类型 (<number> 继承数值本身，其他继承计算后的值) |
不继承 |
| 与块级元素的关系 | 影响块级元素内部行内内容的垂直间距 | 对块级元素无效 |
总结
line-height 和 vertical-align 是 CSS 中用于控制垂直方向布局的重要属性。line-height 主要影响行间距，而 vertical-align 主要控制元素之间的垂直对齐。理解它们的计算机制和适用范围是编写高质量 CSS 的关键。