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

最新推荐文章于 2022-12-17 21:07:46 发布

weixin_33735077

最新推荐文章于 2022-12-17 21:07:46 发布

阅读量315

点赞数

原文链接：https://segmentfault.com/a/1190000004460444

版权

前言

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 的不同。

参考

weixin_33735077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫