如何利用HTML打造流式文字布局_通过CSS line-height与font-size-html教程-PHP中文网

无单位 line-height（如 1.6）是实现真正流式文字布局的唯一可靠路径，因其基于当前 font-size 动态计算且继承时仍按子元素字号重算，而带单位值（如 24px）会破坏响应式节奏与行盒一致性。

如何利用html打造流式文字布局_通过css line-height与font-size

用无单位数值（如 line-height: 1.6）配合相对单位的 font-size（如 rem 或 em），是实现真正流式文字布局的唯一可靠路径；写死 px 行高或混用不同单位会直接破坏响应式节奏。

为什么 `line-height: 1.6` 比 `line-height: 24px` 更适合流式布局

浏览器对 line-height 的计算逻辑决定了它是否能随字号“流动”：1.6 是乘数，始终基于当前元素的 font-size 动态算出实际像素值；而 24px 是绝对长度，一旦父容器字号缩放（比如根元素 font-size 从 16px 变为 14px），行高却卡死在 24px，小字时行距松垮、大字时文字可能重叠。

更关键的是继承行为：line-height: 1.6 传给子元素时，子元素用自己的 font-size 再乘一次 1.6；但 line-height: 24px 继承过去就是 24px，完全脱离子元素字号——这在嵌套文本（如  或 ）中极易导致行盒（line box）高度不一致，视觉断层。

移动端用 rem 做响应式字号时，带单位的 line-height 会彻底失效
line-height: normal 不推荐：它依赖字体和 UA，默认值在 1.0–1.2 之间浮动，跨字体/浏览器表现不可控
百分比写法（如 150%）虽也相对，但继承时可能触发意外计算，不如无单位数值干净

`font-size` 用 `rem` 时，`line-height` 必须同步设为无单位值

如果根元素设了 font-size: 100%（即浏览器默认 16px），再用 rem 控制各级字号，line-height 就必须用无单位数值，否则流式就断了。例如：

html { font-size: 100%; }
body { font-size: 1rem; line-height: 1.6; }
h1 { font-size: 2rem; } /* 实际行高 = 2rem × 1.6 = 3.2rem */
p { font-size: 0.875rem; } /* 实际行高 = 0.875rem × 1.6 = 1.4rem */

这样，无论用户缩放页面、系统启用更大字体、还是你通过 JS 动态调整根字号，所有文本的行高比例都保持一致。