[css] line-height 百分比单位和数值单位的区别

前言

CSS 中的 line-height 属性值有 normal | <number> | <length> | <percentage> | inherit。

属性值：
normal w3c规范建议厂商根据字体设置一个"reasonable"的<number>类型的值，建议在 1.0 到 1.2 之间。
<number> | <length> | <percentage> 下面单独解释，先看一段代码：

code

<style>
div   { font-size: 20px; line-height: 30px;}
div.a { font-size: 20px; line-height: 150%;}
div.b { font-size: 20px; line-height: 1.5;}
div > p.a { font-size: 30px;}
div > p.b { font-size: 40px;}
</style>  
</head>
<body>
<div>
  <p class="a">Lorem ipsum dolor </p>
  <p class="b">Lorem ipsum dolor </p>
</div>   
<div class="a">
  <p class="a">Lorem ipsum dolor </p>
  <p class="b">Lorem ipsum dolor </p>
</div> 
<div class="b">
  <p class="a">Lorem ipsum dolor </p>
  <p class="b">Lorem ipsum dolor </p>
</div>

value process

	font-size	initial	declaration	cascaded	specified	computed	actual
div	20px	normal	30px	30px	30px	30px	30px
div>p.a	30px	normal			30px	30px	30px
div>p.b	40px	normal			30px	30px	30px
div.a	20px	normal	150%	150%	150%	30px	30px
div.a>p.a	30px	normal			30px	30px	30px
div.a>p.b	40px	normal			30px	30px	30px
div.b	20px	normal	1.5	1.5	1.5	1.5	30px
div.b>p.a	30px	normal			1.5	1.5	45px
div.b>p.b	40px	normal			1.5	1.5	60px

解释

div, div.a , div.b 元素的 line-height 的最终值(actual value)都是一样的，都是 30px, 不一样的是 computed value .
为什么 Computed value 不一样呢? 根据 line-height 的 computed value 定义：

Computed value: for <length> and <percentage> the absolute value; otherwise as specified)

对于属性值类型为 "<length>, <percentage>" 的 div ,div.a 元素, computed value 是一个绝对值，所以属性值为 30px 和 150% 都会转化为绝对值，也就是 30px; 而对于属性值为 <number> 类型的 div.b 元素的 computed value 就是 1.5。

computed value 不同会造成什么样的影响呢？答案是对继承有影响。根据规范的的定义：(https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specified-value)：

If the cascade results in a value, use it.
Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent element.
Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

对于没有定义且可以继承的属性，它会继承父元素该属性的 computed value；在这个例子中，由于 line-height 是可继承的, 所以对于div, div.a的子元素 p 继承的 line-height 值都是 30px, 而对于div.b的子元素 p 继承的 line-height 值是 1.5 ，从而导致了 p 元素 actual value 的不同。

[css] line-height 百分比单位和数值单位的区别

前言

解释

参考

杨军军

引用和评论

chai.js 断言库简单实现

CSS团队协作规范

前端开发工具

CSS 如何模拟“真实的”进度条？

纯CSS实现有趣emoji切换开关

那些年我用过的SAP IDE

SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版