無單位數字line-height

leap_frog 發布于2019-08-30 15:54 / 3614人閱讀

摘要：當一個元素是使用不帶單位的數字，聲明的值會被繼承，也就是說這個值會在子元素中用來與子元素本身的重新計算子元素的。所以我們通常想要的效果是使用不帶單位的我們可以在父元素上設定一個無單位數字其子元素會默認繼承。

首先我們來了解一下line-height的單位有哪些：
1.normal
2.inherit
3.number
4.number + px/em/rem/……
5.%

line-height屬性最特別的地方在于可以支持帶單位的值，也可以支持不帶單位的值，那這兩種直接有什么區別呢？
我們先看下面的例子：
https://codepen.io/donnyqi/pe...

當line-height為純數字無單位的時候，子元素的line-height的值會從父元素繼承line-height值與自己本身的font-size值計算后成為自己的line-height值：
line-height:2---->2*16=32px
line-height:2---->2*17=34px
line-height:2---->2*18=36px
line-height:3---->3*18=54px
不帶單位的行高，會在每個后代元素下重新計算出實際值

當line-height為純數字帶單位的時候，子元素的line-height的值會直接繼承父元素的line-height值：
line-height:16px---->16px
line-height:20px---->20px
line-height:24px---->24px
line-heithg:2em ---->2*16=32px
帶單位的行高，后代元素會直接繼承父元素的line-height計算結果值

知道了無單位數字與有單位數組line-height值的區別之后，我們來看一個現象：有單位數字line-height的情況下子元素有跟父元素不一樣font-size大小的情況:

這個現象就說明了有單位數字line-height情況下如果子元素有跟父元素不一樣字號大小的情況，就會導致意想不到的結果，例如文字之間的遮擋問題。

總結：

normal同number效果一樣，會在每個后代元素下重新計算出實際值，系數約1.2

%同number+px/em/rem單位效果一樣，后代元素會直接繼承父元素的line-height計算結果值

當一個元素是使用帶單位的值聲明的，那么它的后代元素會繼承其父元素line-height計算結果值:行高屬性是用類似px、em、rem等單位來聲明時，它的值會先被計算，然后計算后的值會傳到任何繼承它的后代元素。

當一個元素是使用不帶單位的數字，聲明的值會被繼承，也就是說這個值會在子元素中用來與子元素本身的font-size重新計算子元素的line-height。

所以我們通常想要的效果是使用不帶單位的line-height,我們可以在父元素上設定一個無單位數字line-height,其子元素會默認繼承。如果想在子元素上有額外的樣式，則在子元素上寫line-height覆蓋即可。

GPU云服務器云服務器無重復數字 line-height 機柜單位單位域名

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116953.html

無單位數字和行高 —— 別說你懂CSS相對單位

摘要：無單位數字和行高有一些屬性可以接收不帶單位的數值意思就是一個不帶長度單位的數字，如和等于，等于，如此類推。警告不帶單位的只可以表示長度單位和百分比的值，譬如和。段落繼承了的行高。長度有兩種類型絕對的和相對的。前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對relative ...

Airmusic 2019-08-29 16:06 評論0 收藏0
CSS實用技巧二

摘要：在上一篇文章中我們知道可以通過屬性可以實現首行縮進兩個字符。現在我們來講一下第二個技巧。通過設置來實現針對如果里面是標簽的情況下實現更好的優化。為了實現更好的我們就可以應用這個技巧。可以實現元素的居中。 text-indent 在上一篇文章中我們知道可以通過text-indent: 2rem屬性可以實現首行縮進兩個字符。現在我們來講一下第二個技巧。通過設置text-indent: -9...

ChristmasBoy 2019-08-30 13:11 評論0 收藏0
深入解析CSS FlexBox

摘要：如果用動畫來表現，可以看出拉長的時候紅色會變得比藍色長，但壓縮的時候卻是藍色變得比紅色長，如此一來就更能體會在響應式設計里頭的關鍵角色。 Flexbox是一個CSS3的盒子模型（box model），顧名思義它就是一個靈活的盒子（Flexible Box）。 Flexbox模型概念第一步要來看Flexbox的盒子模型，根據W3C文章所描述，flex的盒子模型如下圖所呈現，與一般的盒子...

gplane 2019-08-02 16:16 評論0 收藏0
深入解析CSS FlexBox

摘要：如果用動畫來表現，可以看出拉長的時候紅色會變得比藍色長，但壓縮的時候卻是藍色變得比紅色長，如此一來就更能體會在響應式設計里頭的關鍵角色。 Flexbox是一個CSS3的盒子模型（box model），顧名思義它就是一個靈活的盒子（Flexible Box）。 Flexbox模型概念第一步要來看Flexbox的盒子模型，根據W3C文章所描述，flex的盒子模型如下圖所呈現，與一般的盒子...

shinezejian 2019-08-30 10:48 評論0 收藏0
深入解析CSS FlexBox

摘要：如果用動畫來表現，可以看出拉長的時候紅色會變得比藍色長，但壓縮的時候卻是藍色變得比紅色長，如此一來就更能體會在響應式設計里頭的關鍵角色。 Flexbox是一個CSS3的盒子模型（box model），顧名思義它就是一個靈活的盒子（Flexible Box）。 Flexbox模型概念第一步要來看Flexbox的盒子模型，根據W3C文章所描述，flex的盒子模型如下圖所呈現，與一般的盒子...

tinysun1234 2019-08-23 17:21 評論0 收藏0