国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

waterc / 3648人閱讀

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

前言

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)

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

computed value 不同會(huì)造成什么樣的影響呢？ 答案是對(duì)繼承有影響。根據(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.

對(duì)于沒(méi)有定義且可以繼承的屬性，它會(huì)繼承父元素該屬性的 computed value；在這個(gè)例子中，由于 line-height 是可繼承的, 所以對(duì)于div, div.a的子元素 p 繼承的 line-height 值都是 30px, 而對(duì)于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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115058.html

相關(guān)文章

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

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

    luckyyulin 評(píng)論0 收藏0

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

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

    wapeyang 評(píng)論0 收藏0

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

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

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

  • CSS 高度(css height)

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

    sf_wangchong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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