行高:1.5和行高:css中的150%有什么区别？

Question

谁知道呢？

Answer 1

简短版本:line-height: 150%是静态的,line-height: 1.5是动态的.在继承元素时效果更明显.一个例子:

HTML

<div style="font-size: 12px">
    <span style="font-size: 24px">test</span>
</div>

这个CSS

div { line-height: 150%; } /* Computed line-height: 18px (150% * 12px) */
span { }                   /* Computed line-height: 18px (inherited directly) */

与此相反:

div { line-height: 1.5 }   /* Computed line-height: 18px (1.5 * 12px) */
span { }                   /* Computed line-height: 36px (1.5 * 24px) */

您可以在CSS2规范页面上阅读更多内容

Answer 2

两者都是等价的.

line-height: 1.5(没有单位)将通过1.5计算线高来多次显示元素的字体大小.

line-height: 150%将获取150%元素的计算字体大小来计算行高,相当于将其乘以1.5.

以下示例中的三个规则具有相同的结果行高:

div { line-height: 1.2; font-size: 10pt }     /* number */
div { line-height: 1.2em; font-size: 10pt }   /* length */
div { line-height: 120%; font-size: 10pt }    /* percentage */

现在让我们来看看你问的问题.

我转载了两个案例:

1. http://gregory.pakosz.fr/stackoverflow/2040694-number.html
2. http://gregory.pakosz.fr/stackoverflow/2040694-percentage.html

在1)中,父级的div line-height被设置为1.5乘以div的实际字体大小.span由于您更改了实际的字体大小,因此为子项继承并重新计算此属性.

在2)中,父级的div line-height被设置为150%div的计算字体大小.然后的所计算的字体大小span被从继承div因此150%这一继承计算字体尺寸导致相同的值.

正如@K Prime总结的那样,带走很可能:line-height: 150%是静态的,line-height: 1.5是动态的

参考文献:

• 10.8线高计算:'line-height'和'vertical-align'属性(CSS2)