TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊
em子元素字體大小的em是相對于父元素字體大小元素的width/height/padding/margin用em的話是相對于該元素的font-size，text-indent也不例外
TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊
?首先我們要明確的一點(diǎn)就是font-size,line-height,text-indent都是可繼承的css屬性，接下來我們就來討論這三個(gè)屬性的使用方法還有它們的繼承方法，他們看起來是很簡單，可實(shí)際上卻很容易在用法上混淆。一、font-size（字體大?。?1.px?????直接使用像素指定要使用的特定字號，如p{font-size:18px;}。?2.em或百分?jǐn)?shù)?????em是用來設(shè)置相對父元素的字體大小，em的值=要指定的字體大小/父元素的字體大小。例如，我們要將p元素的字體大小設(shè)為18px，其父元素的字體大小是16px，因?yàn)?8/16=1.125，因此設(shè)置p{font-size:1.125}即可。?使用em在我看來是最好的來設(shè)置字體大小的方法，因?yàn)橄鄬挝挥懈蟮撵`活性，有利于響應(yīng)式Web設(shè)計(jì)開發(fā)。百分?jǐn)?shù)的用法和em差不多，只不過em使用更加普遍。????最后來說這三種方法的繼承性，px就不多說了，就是繼承px的大小。至于使用em和百分?jǐn)?shù)p%這兩種相對單位，它們的子元素繼承的不是相對單位的值，而是計(jì)算后的值。?二、line-height（行高）?1.px（不多說）2.沒有單位的數(shù)字n（最經(jīng)常使用）?????line-height的大小為元素的字體大小和n相乘之后的數(shù)值。如p{font-size:16px;line-height:1.5;}，那么p元素的行高就是24px。使用這種方法，子元素繼承的是父元素的因子n，而不是計(jì)算后的大小。?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ì)算，繼承生成的大小。一般段落的首行縮進(jìn)都是2em。3.百分?jǐn)?shù)p%?????text-indent的百分?jǐn)?shù)的使用方法比較獨(dú)特，它既不是現(xiàn)對于父元素的字體大小來計(jì)算，也不是相對于當(dāng)前元素的字體大小來計(jì)算，它是相對于父元素的寬度進(jìn)行計(jì)算。如，父元素的寬度是300px，那么它的子元素的10%的text-indent就是30px。這個(gè)也是繼承大小，而不是相對單位的值。
舉報(bào)