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

waterc 发布于2019-08-30 12:47 / 3596人阅读

摘要：前言中的属性值有。属性值规范建议厂商根据字体设置一个的类型的值，建议在到之间。不同会造成什么样的影响呢答案是对继承有影响。

前言

CSS 中的 line-height 属性值有 normal | | | | inherit。

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

code

  



  Lorem ipsum dolor 
  Lorem ipsum dolor 
   

  Lorem ipsum dolor 
  Lorem ipsum dolor 
 

  Lorem ipsum dolor 
  Lorem ipsum dolor

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  and  the absolute value; otherwise as specified)

对于属性值类型为 ", " 的 div ,div.a 元素, computed value 是一个绝对值，所以属性值为 30px 和 150% 都会转化为绝对值，也就是 30px; 而对于属性值为类型的 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 的不同。

参考

https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

https://www.w3.org/TR/css3-cascade/#value-stages

GPU云服务器云服务器单位自建服务器和放上的区别 css和html的区别 html和css的区别单位域名的邮箱

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115058.html

CSS学习摘要-数值和单位及颜色

摘要：每对十六进制数代表一个通道红色绿色或者蓝色允许我们指定个可用值。例如，这个代码给出以下结果这些值比较复杂，不太容易理解，但是它们比关键字更灵活您可以使用十六进制值来表示您想要在颜色方案中使用的任何颜色。在CSS中，值的类型有很多种，一些很常见，一些你却几乎没怎么遇到过。我们不会在这篇文档中面面俱到地描述他们，而只是这些对于掌握CSS可能最有用处的这些。本文将会涉及如下CSS的值：数值: ...

luckyyulin 2019-04-23 13:40 评论0 收藏0
深入理解-CSS内联元素之line-height

摘要：常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为，或者使用属性，都可以达到去除内联元素之间的间隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内...

wapeyang 2019-08-29 15:06 评论0 收藏0
深入理解-CSS内联元素之line-height

摘要：常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为，或者使用属性，都可以达到去除内联元素之间的间隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内...

邹强 2019-08-02 10:15 评论0 收藏0
CSS 高度(css height)

摘要：同时也无需使用来实现高度自适应。通常默认情况下不用再设置高度值为，对象高度即是自适应高度。高度不能设置百分比高度如设置百分比的高度无效。扩展阅读宽度最小高度最大高度转载来源网址DIV+CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX，em等常用使用PX（像素）为html单位。 he...

sf_wangchong 2019-04-23 13:13 评论0 收藏0