行高计算
行高計算
在行內格式化上下文中,UA把行內級別的盒子放入行框組成的豎直堆棧。行框的高度由下面規則確定:
1.計算每個行內級別元素的高。對可替換元素、行內塊元素、行內表格元素,這個高是它們的marign 盒子的高;對行內盒子來說,這是它們的行高。(參閱:leading,行內盒子的高,高和margin的計算)2.行內級別的盒子根據'vertical-align'屬性豎直對齊。當‘top',’bottom‘對齊的時候,可以減少行高。 3.行框的高是框最上面到框最下面之間的距離。(包括strut)空的行內元素產生空行內盒子,但是這些盒子依然由margin,padding,border和行高,這些同樣會影響行框的計算。Leading 和 half-leading
CSS假設每一個字體都有字體大小,這指定特定的高在基線上面和深在下面。在這里,我們用A指代高(對給定大小的字體)D指代深度。定義 AD= A + D(AD,從上到下的距離)
UA以相應字體的基線來對齊這些在非替換行內盒子中的字體。然后,對每個字,計算A和D。一個元素中的字可以有不同字形,因此不需要都有相同的A和D。如果一個行內盒子不包含字,這個盒子包含的是strut(一個0寬的不可見字)。這個strut有這個元素第一個可用字體的A和D。
對每個字符,通過 L=‘line-height’ - AD來計算leading。一半的leading在A上面,一半的leading在D下面。
Leading 可能為負值盡管非替換元素的margin,border,padding不參與行高計算。它們仍然渲染在行內盒子周圍。
轉載于:https://www.cnblogs.com/diaoxiong/p/5685648.html
總結
- 上一篇: H5网页App和纯原生的App差距在哪?
- 下一篇: linux 命令(3)echo