line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

面试速答（30 秒版 TL;DR）

line-height 三种常见写法：
- 带单位长度：line-height: 24px
- 纯数字（无单位）：line-height: 1.5（推荐）
- 百分比：line-height: 150%
最大差异点在“继承”：
- 纯数字会把“倍数”继承下去，子元素按自己的 font-size 重新计算，更符合预期。
- 带单位/百分比通常会先算成“具体长度”再继承，子元素字号变了也可能继承到同一个行高长度，导致看起来过松/过紧。

写法	例子	本质含义	继承时的常见效果
长度	`24px`	固定行高长度	子元素可能继承到相同长度，字号变小会显得行距很大
纯数字	`1.5`	倍数（相对当前元素 `font-size`）	子元素继承倍数，按子元素字号重新算，更自然
百分比	`150%`	相对当前元素 `font-size` 的百分比	通常也会先算成长度再继承，效果接近“长度”

<div class="p1">
  父元素
  <span class="c">子元素</span>
</div>
<div class="p2">
  父元素
  <span class="c">子元素</span>
</div>

.p1 {
  font-size: 20px;
  line-height: 1.5; /* 推荐：倍数 */
}

.p2 {
  font-size: 20px;
  line-height: 30px; /* 固定长度 */
}

.c {
  font-size: 12px;
}

解释：

答：因为它继承的是倍数，子元素字号变化时行高能按自身字号自动缩放，避免“子元素字号变小但行距仍然很大”的问题。

答：两者都与 font-size 相关，但纯数字继承的是“倍数”；百分比在计算后更像“具体长度”再继承，因此对子元素字号变化的适配不如纯数字自然。