成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[css] line-height 百分比單位和數(shù)值單位的區(qū)別

waterc / 3653人閱讀

摘要：前言中的屬性值有。屬性值規(guī)范建議廠商根據(jù)字體設(shè)置一個(gè)的類型的值，建議在到之間。不同會(huì)造成什么樣的影響呢答案是對繼承有影響。

前言

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

屬性值：
normal w3c規(guī)范建議廠商根據(jù)字體設(shè)置一個(gè)"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 不一樣呢? 根據(jù) line-height 的 computed value 定義：

Computed value: for  and  the absolute value; otherwise as specified)

對于屬性值類型為 ", " 的 div ,div.a 元素, computed value 是一個(gè)絕對值，所以屬性值為 30px 和 150% 都會(huì)轉(zhuǎn)化為絕對值，也就是 30px; 而對于屬性值為 類型的 div.b 元素的 computed value 就是 1.5。

computed value 不同會(huì)造成什么樣的影響呢？ 答案是對繼承有影響。根據(jù)規(guī)范的的定義：(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.

對于沒有定義且可以繼承的屬性，它會(huì)繼承父元素該屬性的 computed value；在這個(gè)例子中，由于 line-height 是可繼承的, 所以對于div, div.a的子元素 p 繼承的 line-height 值都是 30px, 而對于div.b的子元素 p 繼承的 line-height 值是 1.5 ，從而導(dǎo)致了 p 元素 actual value 的不同。

參考

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115058.html

相關(guān)文章

  • CSS學(xué)習(xí)摘要-數(shù)值和單位及顏色

    摘要：每對十六進(jìn)制數(shù)代表一個(gè)通道紅色綠色或者藍(lán)色允許我們指定個(gè)可用值。例如，這個(gè)代碼給出以下結(jié)果這些值比較復(fù)雜，不太容易理解，但是它們比關(guān)鍵字更靈活您可以使用十六進(jìn)制值來表示您想要在顏色方案中使用的任何顏色。在CSS中，值的類型有很多種，一些很常見，一些你卻幾乎沒怎么遇到過。我們不會(huì)在這篇文檔中面面俱到地描述他們，而只是這些對于掌握CSS可能最有用處的這些。本文將會(huì)涉及如下CSS的值： 數(shù)值: ...

    luckyyulin 評論0 收藏0

  • 深入理解-CSS內(nèi)聯(lián)元素之line-height

    摘要：常見問題這一部分我們來說一說常見的內(nèi)聯(lián)元素的一些問題。通過設(shè)置為，或者使用屬性，都可以達(dá)到去除內(nèi)聯(lián)元素之間的間隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我們討論了font-size，這一篇來說另一個(gè)與文字關(guān)系密切的屬性line-height。這里涉及到了內(nèi)...

    wapeyang 評論0 收藏0

  • 深入理解-CSS內(nèi)聯(lián)元素之line-height

    摘要：常見問題這一部分我們來說一說常見的內(nèi)聯(lián)元素的一些問題。通過設(shè)置為，或者使用屬性，都可以達(dá)到去除內(nèi)聯(lián)元素之間的間隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我們討論了font-size，這一篇來說另一個(gè)與文字關(guān)系密切的屬性line-height。這里涉及到了內(nèi)...

    鄒強(qiáng) 評論0 收藏0

  • CSS 高度(css height)

    摘要：同時(shí)也無需使用來實(shí)現(xiàn)高度自適應(yīng)。通常默認(rèn)情況下不用再設(shè)置高度值為，對象高度即是自適應(yīng)高度。高度不能設(shè)置百分比高度如設(shè)置百分比的高度無效。擴(kuò)展閱讀寬度最小高度最大高度轉(zhuǎn)載來源網(wǎng)址DIV+CSS height高度知識(shí)教程篇 DIV CSS高度簡介這里的CSS高度是指通過CSS來控制設(shè)置對象的高度。使用CSS屬性單詞height。單位可以使用PX，em等常用使用PX（像素）為html單位。 he...

    sf_wangchong 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<