小数和百分比行高有什么区别 [英] What's the difference between decimal and percentage line-height

问题描述

(此问题最初是针对w3c学校的，我已将其更正)

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

请参阅jsfiddle .

A列是，如果您为了简洁起见，请忽略此CSS语法混搭:

  div {line-height:140％;}>div>div«内容» 

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 上设置.然后，该计算得出的 length值被继承，这就是为什么当字体大小随后增加时它看起来被压缩的原因.

两者的规范均指值乘以字体大小.因此，这是指设置了行高的元素的字体大小，而不是继承行高的元素的字体大小.

因此，这仅是解释的一半.但是B，C列的区别​​仅在于指定1.4％或140％，它们是相同的.当然可以！！

我希望至少B和C列都有蓝色的C列.(尽管我也很奇怪，它也不是A列，但至少我理解这一点.)

我已经检查过，并且Firefox和Chromium做同样的事情.

您能解释吗?

解决方案

首先根据给定元素的字体大小计算行高百分比.此计算值是 then 由后代预先烘焙的.另一方面，十进制行高的计算值是该十进制值(这就是指定值"的含义)；您最终看到的是 used 值，该值是在每个后​​代根据其自身的字体大小 继承后在后代"上进行计算"的.在CSS中，它是继承的计算值，而不是使用的值.

让我们从容器开始吧:

  .container {font-size:1rem;行高:140％;} 

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

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

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

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

   然后，此值由B列的子级继承.其字体大小为1.44rem，行高为1.68rem.

3. 您可以使用 line-height:1.40 声明覆盖C列的行高.尽管C列的字体大小和行高的计算方法与B列相同，但其子元素所继承的 not 为1.4×1.2rem = 1.68雷姆它是1.4(比率，如果可以的话，则为原始百分比，但不是长度).

   因此，C列的子代具有从C列继承的计算的行高1.4.然后，此值将用于基于其自身的字体大小计算该子代的行高.因此，它的使用行高为1.4×1.44rem = 2.016rem.

埃里克·迈耶(Eric Meyer)在小数点上有很棒的文章与百分比线高.我的解释只是比较复杂，但是原理是相同的.

(This question originally referenced w3c schools, I've corrected that reference)

According to w3c the CSS line-height value can be set as follows:

<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

So line height = font-size × number or line height = font-size × percentage ÷ 100%, which should be the same.

And line-height is inherited.

However, I've noticed that nested elements that increase the font size result in quite different line heights, as can be seen here:

Column C (blue) is what I would have expected.

See jsfiddle.

Column A is, if you pardon this mashup of css syntax for sake of succinctness:

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

Column B is:

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

Column C is:

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

Half way to understanding

So it looks like column A, the line height is being calculated as a length (e.g. pixels) and set on the outer div's font-size. This calculated, length value is then inherited, which is why it looks squashed up when the font size subsequently increases.

The specs for both refer to the value being multiplied by the font size. So this refers to the font size of the element on which line-height is set, not the font size of the element that inherits the line-height.

So that goes half way to explaining. But columns B, C only differ in specifying 1.4 or 140%, which are the same. Surely?!

I would expect the behaviour of the blue Column C for at least Column B and C. (Although I think it's pretty weird that it's not Column A, too, but at least I understand that.)

I've checked and Firefox and Chromium do the same thing.

Can you explain?

解决方案

Percentage line heights are computed first based on the font size for the given element. This computed value is then inherited pre-baked by descendants. The computed value of a decimal line height on the other hand is that decimal value (this is what is meant by "specified value"); what you end up seeing is the used value, which is "computed" on each descendant based on its own font size after it has been inherited. In CSS, it is computed values that are inherited, not used values.

Let's start with the container:

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

The container has a computed font size of 1rem, and a computed line height of 1.4rem.

1. This computed line height is then inherited by column A. Column A has a font size of 1.2rem, and a line height of 1.4rem.

   The same line height is then inherited by the child of column A, so its font size computes to 1.44rem (based on column A's) and its line height remains as 1.4rem.

2. You override the line height of column B such that it gets its own line-height:140% declaration. This percentage is calculated based on the font size of column B. That makes 140% of 1.2rem, not of 1rem, resulting in a line height of 1.68rem.

   This value is then inherited by the child of column B. Its font size computes to 1.44rem and its line height 1.68rem.

3. You override the line height of column C with a line-height:1.40 declaration. While the font size and line height of column C are calculated in the same way as those of column B, what is inherited by its child is not 1.4 × 1.2rem = 1.68rem; it is 1.4 (a ratio, or a raw percentage if you will, but not a length).

   So the child of column C has a computed line height of 1.4, as inherited from column C. This value is then used in calculating the child's line height based on its own font size. Therefore its used line height is 1.4 × 1.44rem = 2.016rem.

Eric Meyer has a great article on decimal vs percentage line heights. Mine just happens to be a slightly more convoluted explanation, but the principles are the same.

这篇关于小数和百分比行高有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！