資訊專欄INFORMATION COLUMN
摘要：當(dāng)一個(gè)元素是使用不帶單位的數(shù)字，聲明的值會(huì)被繼承，也就是說這個(gè)值會(huì)在子元素中用來與子元素本身的重新計(jì)算子元素的。所以我們通常想要的效果是使用不帶單位的我們可以在父元素上設(shè)定一個(gè)無單位數(shù)字其子元素會(huì)默認(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ù)字無單位的時(shí)候，子元素的line-height的值會(huì)從父元素繼承l(wèi)ine-height值與自己本身的font-size值計(jì)算后成為自己的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
不帶單位的行高，會(huì)在每個(gè)后代元素下重新計(jì)算出實(shí)際值
當(dāng)line-height為純數(shù)字帶單位的時(shí)候，子元素的line-height的值會(huì)直接繼承父元素的line-height值：
line-height:16px---->16px
line-height:20px---->20px
line-height:24px---->24px
line-heithg:2em ---->2*16=32px
帶單位的行高，后代元素會(huì)直接繼承父元素的line-height計(jì)算結(jié)果值
知道了無單位數(shù)字與有單位數(shù)組line-height值的區(qū)別之后，我們來看一個(gè)現(xiàn)象：有單位數(shù)字line-height的情況下子元素有跟父元素不一樣font-size大小的情況:
這個(gè)現(xiàn)象就說明了有單位數(shù)字line-height情況下如果子元素有跟父元素不一樣字號(hào)大小的情況，就會(huì)導(dǎo)致意想不到的結(jié)果，例如文字之間的遮擋問題。
總結(jié)：
normal同number效果一樣，會(huì)在每個(gè)后代元素下重新計(jì)算出實(shí)際值，系數(shù)約1.2
%同number+px/em/rem單位效果一樣，后代元素會(huì)直接繼承父元素的line-height計(jì)算結(jié)果值
當(dāng)一個(gè)元素是使用帶單位的值聲明的，那么它的后代元素會(huì)繼承其父元素line-height計(jì)算結(jié)果值:行高屬性是用類似px、em、rem等單位來聲明時(shí)，它的值會(huì)先被計(jì)算，然后計(jì)算后的值會(huì)傳到任何繼承它的后代元素。
當(dāng)一個(gè)元素是使用不帶單位的數(shù)字，聲明的值會(huì)被繼承，也就是說這個(gè)值會(huì)在子元素中用來與子元素本身的font-size重新計(jì)算子元素的line-height。
所以我們通常想要的效果是使用不帶單位的line-height,我們可以在父元素上設(shè)定一個(gè)無單位數(shù)字line-height,其子元素會(huì)默認(rèn)繼承。如果想在子元素上有額外的樣式，則在子元素上寫line-height覆蓋即可。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116953.html
摘要：無單位數(shù)字和行高有一些屬性可以接收不帶單位的數(shù)值意思就是一個(gè)不帶長(zhǎng)度單位的數(shù)字，如和等于，等于，如此類推。警告不帶單位的只可以表示長(zhǎng)度單位和百分比的值，譬如和。段落繼承了的行高。長(zhǎng)度有兩種類型絕對(duì)的和相對(duì)的。 前段時(shí)間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對(duì)relative ...
摘要：在上一篇文章中我們知道可以通過屬性可以實(shí)現(xiàn)首行縮進(jìn)兩個(gè)字符?，F(xiàn)在我們來講一下第二個(gè)技巧。通過設(shè)置來實(shí)現(xiàn)針對(duì)如果里面是標(biāo)簽的情況下實(shí)現(xiàn)更好的優(yōu)化。為了實(shí)現(xiàn)更好的我們就可以應(yīng)用這個(gè)技巧。可以實(shí)現(xiàn)元素的居中。 text-indent 在上一篇文章中我們知道可以通過text-indent: 2rem屬性可以實(shí)現(xiàn)首行縮進(jìn)兩個(gè)字符?，F(xiàn)在我們來講一下第二個(gè)技巧。通過設(shè)置text-indent: -9...
摘要：如果用動(dòng)畫來表現(xiàn)，可以看出拉長(zhǎng)的時(shí)候紅色會(huì)變得比藍(lán)色長(zhǎng)，但壓縮的時(shí)候卻是藍(lán)色變得比紅色長(zhǎng)，如此一來就更能體會(huì)在響應(yīng)式設(shè)計(jì)里頭的關(guān)鍵角色。 Flexbox是一個(gè)CSS3的盒子模型（box model），顧名思義它就是一個(gè)靈活的盒子（Flexible Box）。 Flexbox模型概念 第一步要來看Flexbox的盒子模型，根據(jù)W3C文章所描述，flex的盒子模型如下圖所呈現(xiàn)，與一般的盒子...
摘要：如果用動(dòng)畫來表現(xiàn)，可以看出拉長(zhǎng)的時(shí)候紅色會(huì)變得比藍(lán)色長(zhǎng)，但壓縮的時(shí)候卻是藍(lán)色變得比紅色長(zhǎng)，如此一來就更能體會(huì)在響應(yīng)式設(shè)計(jì)里頭的關(guān)鍵角色。 Flexbox是一個(gè)CSS3的盒子模型（box model），顧名思義它就是一個(gè)靈活的盒子（Flexible Box）。 Flexbox模型概念 第一步要來看Flexbox的盒子模型，根據(jù)W3C文章所描述，flex的盒子模型如下圖所呈現(xiàn)，與一般的盒子...
摘要：如果用動(dòng)畫來表現(xiàn)，可以看出拉長(zhǎng)的時(shí)候紅色會(huì)變得比藍(lán)色長(zhǎng)，但壓縮的時(shí)候卻是藍(lán)色變得比紅色長(zhǎng)，如此一來就更能體會(huì)在響應(yīng)式設(shè)計(jì)里頭的關(guān)鍵角色。 Flexbox是一個(gè)CSS3的盒子模型（box model），顧名思義它就是一個(gè)靈活的盒子（Flexible Box）。 Flexbox模型概念 第一步要來看Flexbox的盒子模型，根據(jù)W3C文章所描述，flex的盒子模型如下圖所呈現(xiàn)，與一般的盒子...
閱讀 3017·2023-04-25 19:20
閱讀 879·2021-11-24 09:38
閱讀 2160·2021-09-26 09:55
閱讀 2512·2021-09-02 15:11
閱讀 2263·2019-08-30 15:55
閱讀 3672·2019-08-30 15:54
閱讀 3223·2019-08-30 14:03
閱讀 3024·2019-08-29 17:11
