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

資訊專欄INFORMATION COLUMN

無單位數(shù)字line-height

leap_frog / 3620人閱讀

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

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

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

當(dāng)line-height為純數(shù)字無單位的時候，子元素的line-height的值會從父元素繼承l(wèi)ine-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
不帶單位的行高，會在每個后代元素下重新計算出實際值

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

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

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

總結(jié)：

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

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

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

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

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

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

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

相關(guān)文章

  • 無單位數(shù)字和行高 —— 別說你懂CSS相對單位

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

    Airmusic 評論0 收藏0

  • CSS實用技巧二

    摘要：在上一篇文章中我們知道可以通過屬性可以實現(xiàn)首行縮進兩個字符?，F(xiàn)在我們來講一下第二個技巧。通過設(shè)置來實現(xiàn)針對如果里面是標(biāo)簽的情況下實現(xiàn)更好的優(yōu)化。為了實現(xiàn)更好的我們就可以應(yīng)用這個技巧?？梢詫崿F(xiàn)元素的居中。 text-indent 在上一篇文章中我們知道可以通過text-indent: 2rem屬性可以實現(xiàn)首行縮進兩個字符?，F(xiàn)在我們來講一下第二個技巧。通過設(shè)置text-indent: -9...

    ChristmasBoy 評論0 收藏0

  • 深入解析CSS FlexBox

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

    gplane 評論0 收藏0

  • 深入解析CSS FlexBox

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

    shinezejian 評論0 收藏0

  • 深入解析CSS FlexBox

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

    tinysun1234 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<