首頁猿問 em不是父元素的字體大小嗎？

em不是父元素的字體大小嗎？

CSS3

慕仙森 2019-02-26 16:58:34

查看完整描述

2 回答

當(dāng)年話下

TA貢獻(xiàn)1890條經(jīng)驗獲得超9個贊

em
子元素字體大小的em是相對于父元素字體大小
元素的width/height/padding/margin用em的話是相對于該元素的font-size，text-indent也不例外

反對回復(fù) 2019-02-26

尚方寶劍之說

TA貢獻(xiàn)1788條經(jīng)驗獲得超4個贊

首先我們要明確的一點就是font-size,line-height,text-indent都是可繼承的css屬性，接下來我們就來討論這三個屬性的使用方法還有它們的繼承方法，他們看起來是很簡單，可實際上卻很容易在用法上混淆。
一、font-size（字體大?。?nbsp;
1.px
直接使用像素指定要使用的特定字號，如p{font-size:18px;}。
2.em或百分?jǐn)?shù)
em是用來設(shè)置相對父元素的字體大小，em的值=要指定的字體大小/父元素的字體大小。例如，我們要將p元素的字體大小設(shè)為18px，其父元素的字體大小是16px，因為18/16=1.125，因此設(shè)置p{font-size:1.125}即可。使用em在我看來是最好的來設(shè)置字體大小的方法，因為相對單位有更大的靈活性，有利于響應(yīng)式Web設(shè)計開發(fā)。百分?jǐn)?shù)的用法和em差不多，只不過em使用更加普遍。
最后來說這三種方法的繼承性，px就不多說了，就是繼承px的大小。至于使用em和百分?jǐn)?shù)p%這兩種相對單位，它們的子元素繼承的不是相對單位的值，而是計算后的值。
二、line-height（行高）
1.px（不多說）
2.沒有單位的數(shù)字n（最經(jīng)常使用）
line-height的大小為元素的字體大小和n相乘之后的數(shù)值。如p{font-size:16px; line-height:1.5;}，那么p元素的行高就是24px。使用這種方法，子元素繼承的是父元素的因子n，而不是計算后的大小。
3.em或百分?jǐn)?shù)
line-height的相對單位em、百分?jǐn)?shù)的使用方法與font-size是不同的，line-height的相對單位是相對于當(dāng)前元素的字體大小來說的，而不是相對于其父元素。如，p元素字體大小為20px，line-height為1em，其父元素的字體大小為16px，那么p元素的line-height等于20px而不是16px。不過繼承性和font-size是一樣的，都是繼承大小，即產(chǎn)生的行高，而不是相對單位的值。
三、text-indent（文本縮進(jìn)）
1.px（不多說）
2.em
與line-height一樣，根據(jù)當(dāng)前元素的字體大小計算，繼承生成的大小。一般段落的首行縮進(jìn)都是2em。
3.百分?jǐn)?shù)p%
text-indent的百分?jǐn)?shù)的使用方法比較獨特，它既不是現(xiàn)對于父元素的字體大小來計算，也不是相對于當(dāng)前元素的字體大小來計算，它是相對于父元素的寬度進(jìn)行計算。如，父元素的寬度是300px，那么它的子元素的10%的text-indent就是30px。這個也是繼承大小，而不是相對單位的值。