說下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 的值，因為它最靈活，也最符合響應式設計的原則。 避免使用固定長度值，除非有特殊的需求。 百分比值與數值值效果相同，選擇哪個取決於個人習慣。