摘要:前言中的属性值有。属性值规范建议厂商根据字体设置一个的类型的值,建议在到之间。不同会造成什么样的影响呢答案是对继承有影响。
前言
CSS 中的 line-height 属性值有 normal |
属性值:
normal w3c规范建议厂商根据字体设置一个"reasonable"的
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)
对于属性值类型为 "
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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115058.html
摘要:每对十六进制数代表一个通道红色绿色或者蓝色允许我们指定个可用值。例如,这个代码给出以下结果这些值比较复杂,不太容易理解,但是它们比关键字更灵活您可以使用十六进制值来表示您想要在颜色方案中使用的任何颜色。在CSS中,值的类型有很多种,一些很常见,一些你却几乎没怎么遇到过。我们不会在这篇文档中面面俱到地描述他们,而只是这些对于掌握CSS可能最有用处的这些。本文将会涉及如下CSS的值: 数值: ...
摘要:常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为,或者使用属性,都可以达到去除内联元素之间的间隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我们讨论了font-size,这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内...
摘要:常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为,或者使用属性,都可以达到去除内联元素之间的间隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我们讨论了font-size,这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内...
摘要:同时也无需使用来实现高度自适应。通常默认情况下不用再设置高度值为,对象高度即是自适应高度。高度不能设置百分比高度如设置百分比的高度无效。扩展阅读宽度最小高度最大高度转载来源网址DIV+CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX,em等常用使用PX(像素)为html单位。 he...
阅读 2454·2021-09-22 16:05
阅读 2915·2021-09-10 11:24
阅读 3608·2019-08-30 12:47
阅读 2915·2019-08-29 15:42
阅读 3345·2019-08-29 15:32
阅读 1920·2019-08-26 11:48
阅读 1059·2019-08-23 14:40
阅读 880·2019-08-23 14:33