十进制和百分比行高

Question

（这个问题最初引用了w3c学校，我已经纠正了这个参考）

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

  

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

     

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

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

继承行高。

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

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

See jsfiddle

如果您为了简洁而原谅这种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的长度（例如像素）和。然后继承此计算的长度值，这就是当字体大小随后增加时它看起来被压扁的原因。

两者的规格都是指将值乘以字体大小。所以这是指设置行高的元素的字体大小，而不是继承行高的元素的字体大小。

所以这只是解释的一半。但是列B，C仅在指定1.4或140％时不同，它们是相同的。当然！

我希望蓝色C列的行为至少是B栏和C栏。（虽然我认为它不是A列也很奇怪，但至少我明白了。）

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

你能解释一下吗？

Answer 1

首先根据给定元素的字体大小计算百分比线高。此计算值是然后继承由后代预先烘焙。另一方面，小数行高度的计算值是十进制值（这是“指定值”的含义）;您最终看到的是使用的值，该值在每个后代基于其自身的字体大小被“计算”后继承。在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 REM;它是1.4（一个比例，或者如果你愿意，可以是原始百分比，但不是长度）。

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

Eric Meyer在小数和百分比线高度上有一个很棒的article。我的恰好是一个稍微复杂的解释，但原则是相同的。