css - 小数和百分比行高有什么区别

Question

(这个问题最初引用了 w3c schools，我已经更正了那个引用)

According to w3c CSS line-height值可以设置如下:

<number> The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.

<percentage> The computed value of the property is this percentage multiplied by the element's computed font size

所以 line height = font-size × number或 line height = font-size × percentage ÷ 100% ，应该是一样的。

并且行高是继承的。

但是，我注意到增加字体大小的嵌套元素会导致完全不同的行高，如下所示:

C 列(蓝色)是我所期望的。

See jsfiddle .

A 列是，如果您为了简洁起见而原谅这种 css 语法混搭:

 div {line-height:140%;} > div > div «content»

B 列是:

 div {line-height:140%;} > div > div {line-height:140%} «content»

C 列是:

 div {line-height:140%;} > div > div {line-height:1.40} «content»

理解的一半

所以它看起来像 A 列，行高被计算为长度(例如像素)并设置在外部 div 的 font-size 上.然后继承这个计算出的长度值，这就是为什么当字体大小随后增加时它看起来被压扁的原因。

两者的规范都是指乘以字体大小的值。所以这里指的是设置line-height的元素的字号，而不是继承line-height的元素的字号。

所以这已经解释了一半。但是 B 列、C 列仅在指定 1.4 或 140% 时有所不同，它们是相同的。当然可以？!

我希望蓝色 C 列的行为至少适用于 B 列和 C 列。(虽然我认为它也不是 A 列很奇怪，但至少我理解这一点。)

我检查过，Firefox 和 Chromium 做同样的事情。

你能解释一下吗？

Answer 1

首先根据给定元素的字体大小计算百分比行高。此计算值 then 由后代预烘焙继承。另一方面，小数线高的计算值是那个小数值(这就是“指定值”的意思)；您最终看到的是 used 值，它是在每个后​​代 继承后根据其自身的字体大小“计算”出来的。在 CSS 中，it is computed values that are inherited , 未使用的值。

让我们从容器开始:

.container {
    font-size:1rem;
    line-height:140%;
}

容器的计算字体大小为 1rem，行高为 1.4rem。

1. 此计算出的行高随后由 A 列继承。A 列的字体大小为 1.2rem，行高为 1.4rem。

   相同的行高随后由 A 列的子项继承，因此其字体大小计算为 1.44rem(基于 A 列)并且其行高保持为 1.4rem。

2. 您覆盖 B 列的行高，使其获得自己的 line-height:140% 声明。这个百分比是根据 B 列的字体大小计算的。这使得 1.2rem 的 140%，而不是 1rem，导致行高为 1.68rem。

   此值随后由 B 列的子级继承。其字体大小计算为 1.44rem，行高为 1.68rem。

3. 您使用 line-height:1.40 声明覆盖 C 列的行高。虽然 C 列的字号和行高的计算方式与 B 列相同，但其子列继承的是 不是 1.4 × 1.2rem = 1.68雷姆;它是 1.4(一个比率，如果你愿意的话，也可以是一个原始百分比，但不是长度)。

   因此，C 列的子项的计算行高为 1.4，继承自 C 列。此值随后用于根据其自身的字体大小计算子项的行高。因此其使用行高为1.4×1.44rem = 2.016rem。

Eric Meyer 有很棒的 article关于小数点与百分比行高。我的只是碰巧是一个稍微复杂的解释，但原理是一样的。