用--line-height而非硬编码可维护性更高、支持主题切换、继承计算值防塌陷；需在:root定义无单位数值，子元素用inherit复用已计算值，js通过setproperty安全更新。
为什么用 --line-height 而不是直接写死 line-height: 1.6
硬编码行高值会让整套排版逻辑脱离 CSS 层叠体系。比如你在 p 上写了 line-height: 1.8，后续加个暗色主题的 @media (prefers-color-scheme: dark) 想统一调成 1.5，就得挨个重写所有选择器——而用 --line-height 只需改一次根变量。更关键的是，它能被子元素自然继承计算结果（不是原始声明），避免嵌套时因字体大小不同导致行高塌陷或重叠。
如何正确定义和使用 --line-height 变量
必须在 :root 或 html 上定义，确保全局可读；子元素用 inherit 或 var(--line-height) 获取，而不是重复写倍数。
-
:root { --line-height: 1.6; }—— 推荐设为无单位数值，便于与font-size动态联动 -
body { line-height: var(--line-height); }—— 让 body 成为行高“分发枢纽” -
p, h1, ul, blockquote { line-height: inherit; }—— 关键：用inherit复用已计算值，不是重新解析变量 - 局部例外直接覆盖：
blockquote { line-height: var(--line-height, 1.4); }
JavaScript 动态更新 --line-height 的安全写法
不要操作 el.style.lineHeight，那会覆盖样式表；而是通过 document.documentElement.style.setProperty() 修改根变量，让所有 var(--line-height) 实时响应。
- 滑块控制示例：
slider.addEventListener('input', () => { document.documentElement.style.setProperty('--line-height', slider.value); }); - 避免传入带单位的字符串，如
'1.6em'或'24px'，否则var(--line-height)在不同font-size下失效 - 若需限制范围，JS 侧做校验：
const val = Math.max(1.2, Math.min(2.4, parseFloat(slider.value)));
哪些地方容易踩坑
最常被忽略的是继承行为差异：用 inherit 是继承父元素**已计算出的行高像素值**（比如 24px），而 var(--line-height) 是每次重新计算（1.6 × 当前 font-size）。两者效果不同，不能混用。
- 表格单元格（
td）默认是display: table-cell，line-height有效，但若同时设了height，可能被截断——优先调padding+line-height组合 - 行内元素（如
span）设line-height不影响布局高度，只影响其内部行框；真正撑开容器的是块级父元素 - SSR 或静态站点中，首次渲染时 JS 还未执行，务必在
:root中设合理默认值，避免闪动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
