前端/移动开发面试题更新 2026-08-05

在 CSS 中,line-height 设为 100% 与设为 1 这两者在继承方式和最终计算值上有什么本质区别?

前端/移动开发技术原理CSS

考察说明

考查对 line-height 百分比与数字两种单位在继承机制和计算方式上差异的理解。

回答思路

  1. 【回答框架 1】line-height 为百分比时,其计算值是相对于当前元素自身的 font-size 得出的,而继承时子元素继承的是计算后的具体数值,不是百分比本身。因此如果父元素 font-size 为 20px,line-height:100% 会计算为 20px,子元素继承 20px,即使子元素 font-size 变成 30px,line-height 仍是 20px,可能造成行高不足。
  2. 【回答框架 2】line-height 为数字(如 1)时,它作为缩放因子直接参与计算,子元素继承的是这个因子,而不是计算后的具体长度。因此当子元素 font-size 为 30px 时,line-height 会重新计算为 30px,始终是当前元素 font-size 的对应倍数,保持相对比例。
  3. 【回答框架 3】对于 line-height:1,实际效果是行高等于当前元素的 font-size,通常这可以容纳字符,但若遇到更高内联元素或字体上浮,可能发生重叠;而乘以一个大于 1 的无单位值(如 1.5)常用作安全默认设置。
  4. 【回答框架 4】实际应用中,设置无单位数字(如 line-height:1.6)更易于维护,因为它随字体大小自适应;设置百分比或长度则容易在继承场景中出现子元素行高固定过小的问题,尤其在小字号标题或按钮中更明显。
  5. 【关键点 1】百分比 line-height 在计算后继承具体像素值,子元素不会随自身 font-size 变化。
  6. 【关键点 2】数字 line-height 继承倍数因子,子元素行高随自身 font-size 比例变化。
  7. 【关键点 3】line-height:1 使行高等于当前 font-size,但可能因内容溢出导致文字重叠。
  8. 【关键点 4】推荐使用无单位数字设置 body 等容器级 line-height,以保持相对伸缩。
  9. 【关键点 5】继承路径是区别的核心:百分比继承计算值,数字继承因子本身。
  10. 【易错点 1】误以为子元素继承百分比表达式,实际继承的是父元素经过计算后的长度值。
  11. 【易错点 2】低版本浏览器存在差异,但现代浏览器统一按上述规范实现,无需过度兼容旧 IE。
  12. 【易错点 3】设置 line-height:100% 并不代表行高等于父元素字号,而是等于当前元素自身字号。