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

（这个问题最初引用了w3c学校，我已经更正了该引用）

根据w3c http://www.w3.org/TR/CSS21/visudet.html#propdef-line-heightCSSline-height值可以设置如下：

<number>该属性的使用值是该数字乘以元素的字体大小。负值是非法的。计算值与指定值相同。

<percentage>属性的计算值是该百分比乘以元素的计算字体大小

So line height = font-size × number or line height = font-size × percentage ÷ 100%，这应该是相同的。

并且行高是继承的。

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

C 列（蓝色）是我所期望的。

参见 jsfiddle http://jsfiddle.net/bkunsr0h/1/.

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

 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 也做了同样的事情。

你可以解释吗？

首先根据给定元素的字体大小计算百分比行高。这个计算值是then由后代继承预烤。另一方面，小数线高度的计算值是该十进制值（这就是“指定值”的含义）；你最终看到的是used值，这是根据每个后代自己的字体大小“计算”的after它已被继承。在 CSS 中，它是继承的计算值 http://www.w3.org/TR/CSS21/cascade.html#inheritance，不是使用值。

让我们从容器开始：

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

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

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

   The same然后，行高由 A 列的子项继承，因此其字体大小计算为 1.44rem（基于 A 列），并且其行高保持为 1.4rem。

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

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

3. 您可以使用 a 覆盖 C 列的行高line-height:1.40宣言。虽然C列的字体大小和行高的计算方式与B列的相同，但是什么是遗传由它的孩子是not1.4×1.2rem = 1.68rem；它是 1.4（一个比率，或者如果您愿意的话，可以是原始百分比，但不是长度）。

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

埃里克·迈耶（Eric Meyer）有一个伟大的article http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights关于小数与百分比线高度。我的解释恰好稍微复杂一些，但原理是相同的。