[css] line-height 百分比單位和數值單位的區別

waterc 發布于2019-08-30 12:47 / 3631人閱讀

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

前言

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的區別單位域名的郵箱

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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