这是一个考察对 CSS line-height 属性计算方式深刻理解的经典面试题。虽然 100% 和 1 看似等价，但在 line-height 的上下文中，它们的行为有本质区别。
核心区别
| 值 | 计算方式 | 是否继承 | 实际效果 |
|---|---|---|---|
line-height: 1 | 无单位数值。计算为 当前元素字体大小 × 1。 | 继承计算后的数值。子元素继承的是一个绝对数值（如 16px）。 | 推荐使用。行为可预测，是设置行高的最佳实践。 |
line-height: 100% | 百分比。计算为 当前元素字体大小 × 100%。 | 继承计算表达式。子元素继承的是 100% 这个百分比值。 | 不推荐用于 line-height。在子元素上会基于子元素自身的字体大小重新计算，可能导致意外结果。 |
详细解释与示例
1. line-height: 1 (推荐)
- 计算：
line-height=font-size×1。 - 继承：子元素继承的是一个具体的像素值（或计算后的绝对值）。
<div class="parent">
父元素文本
<span class="child">子元素文本</span>
</div>.parent {
font-size: 16px;
line-height: 1; /* 计算为 16px × 1 = 16px */
}
.child {
font-size: 24px; /* 子元素字体更大 */
/* line-height 继承自父元素，是 16px 这个具体值 */
}- 结果：
.parent的行高 =16px。.child的行高 =16px（继承了父元素计算后的绝对值）。- 问题：子元素的行高 (
16px) 小于其字体大小 (24px)，文字会被挤压，非常难看！
注意：这个例子说明了即使使用
line-height: 1，如果子元素字体变大，也可能出现问题。但关键是继承的是一个固定值。
2. line-height: 100% (不推荐)
- 计算：
line-height=当前元素 font-size×100%。 - 继承：子元素继承的是
100%这个百分比符号，然后基于自己的font-size重新计算。
.parent {
font-size: 16px;
line-height: 100%; /* 计算为 16px × 100% = 16px */
}
.child {
font-size: 24px;
/* 继承了 line-height: 100%，所以它的行高 = 24px × 100% = 24px */
}- 结果：
.parent的行高 =16px。.child的行高 =24px（基于自己的字体大小重新计算）。- 结果更合理：每个元素的行高都等于自己的字体大小。
看似
100%更好？ 不一定。如果父元素font-size: 16px,line-height: 100%，子元素font-size: 12px，那么子元素行高就是12px，可能太紧凑。
关键对比与最佳实践
| 场景 | line-height: 1 | line-height: 100% |
|---|---|---|
| 父元素 | 行高 = font-size × 1 | 行高 = font-size × 100% (结果相同) |
| 子元素继承 | 继承一个固定数值 (如 16px) | 继承一个百分比 (100%)，基于自身 font-size 重新计算 |
| 可预测性 | ✅ 高。继承的是绝对值。 | ❌ 低。子元素行高取决于其自身字体大小，行为复杂。 |
| 推荐度 | ✅✅✅ 强烈推荐 | ❌ 不推荐用于 line-height |
为什么 line-height: 1 是最佳实践？
- 无单位数值是相对的：它相对于当前元素的
font-size计算。 - 继承的是计算结果：子元素继承的是一个数字，然后这个数字会相对于子元素自己的
font-size再次应用。- 如果父元素
line-height: 1.5,font-size: 16px(行高=24px)。 - 子元素
font-size: 20px。 - 子元素的行高 =
20px × 1.5 = 30px。 - 这正是我们期望的：行高与字体大小成比例。
- 如果父元素
line-height: 100% 的正确用途
line-height: 100% 在 line-height 上表现不佳，但它在其他属性上很常用，例如：
/* 让元素高度严格等于字体大小 */
.element {
font-size: 16px;
line-height: 100%; /* 高度 ≈ 16px */
height: 100%; /* 高度基于父元素，但 line-height 限制了内容高度 */
}但这通常不是好做法，容易导致文字溢出。
总结回答示例
line-height: 1和line-height: 100%的主要区别在于继承机制。
line-height: 1是一个无单位数值，它基于当前元素的font-size计算出行高，并且子元素继承的是这个计算后的绝对值。line-height: 100%是一个百分比，它也基于当前元素font-size计算，但子元素继承的是100%这个百分比值，会基于子元素自身的font-size重新计算。虽然两者在父元素上效果可能相同，但由于继承行为的差异，
line-height: 100%在复杂嵌套中可能导致不可预测的结果。因此，强烈推荐使用无单位数值（如1,1.5,2）来设置line-height，这是最佳实践。
THE END
