说下line-height三种赋值方式有何区别？

在 CSS 中，line-height 属性用于设置文本行的高度。它有三种赋值方式，它们之间有一些重要的区别：

1. 数值 (number): 例如 line-height: 1.5; 或 line-height: 2;

   • 含义: 这个数值是相对于字体大小 (font-size) 的乘数。 line-height: 1.5 表示行高是字体大小的 1.5 倍，line-height: 2 表示行高是字体大小的两倍。
   • 继承性: 这个数值会被子元素继承，但子元素会继承这个乘数，而不是计算后的像素值。 例如，如果父元素设置 font-size: 16px 和 line-height: 1.5，子元素继承了 line-height: 1.5，如果子元素的 font-size 是 24px，那么它的行高会是 24px * 1.5 = 36px，而不是父元素的 16px * 1.5 = 24px。
   • 应用场景: 这是最常用的方式，因为它可以根据字体大小自动调整行高，保持文本在不同字体大小下的比例一致，提高可读性。

2. 长度值 (length): 例如 line-height: 20px; 或 line-height: 1.5em;

   • 含义: 这个值是一个固定的长度，可以是像素 (px)、em、rem 等单位。line-height: 20px 表示行高固定为 20 像素。
   • 继承性: 子元素会继承这个具体的像素值（即使使用了 em 或 rem，也会先计算成像素值再继承）。
   • 应用场景: 这种方式不太常用，因为它不够灵活，当字体大小改变时，行高不会随之调整，可能导致文本行之间过于拥挤或过于稀疏。 但在某些特殊场景下，例如需要精确控制行高以对齐元素时，可能会用到。

3. 百分比 (percentage): 例如 line-height: 150%;

   • 含义: 这个百分比是相对于字体大小 (font-size) 的。 line-height: 150% 等同于 line-height: 1.5。
   • 继承性: 与数值方式类似，子元素继承的是百分比值，而不是计算后的像素值。
   • 应用场景: 与数值方式类似，也比较常用，但数值方式更为普遍。

总结:

赋值方式	值	继承性	应用场景
数值	1.5, 2	继承乘数	最常用，灵活，根据字体大小自动调整行高
长度值	20px, 1.5em	继承计算后的像素值	不太常用，需要精确控制行高时使用
百分比	150%	继承百分比值	与数值方式类似，但数值方式更为普遍

建议优先使用数值作为 line-height 的值，因为它最灵活，也最符合响应式设计的原则。 避免使用固定长度值，除非有特殊的需求。 百分比值与数值值效果相同，选择哪个取决于个人习惯。