問(wèn)題描述

<p style='font-size: 14px;line-height: 3'> <p style='font-size: 2em'>hello<span style='font-size: 3em;line-height: 3em'> world</span> </p></p>

hello和world所在元素的實(shí)際行高是多少呢,原因是什么呢？

問(wèn)題解答

<p style='font-size: 14px;line-height: 3>

這個(gè)是定義了一個(gè)基準(zhǔn)的字體大小，行高設(shè)置3的意思是下面所有子元素，其行高是自己字體的3倍

<p style='font-size: 2em'>這個(gè)元素的字體大小是父元素的2倍，214=28px，行高是自己字體的3倍 283 = 84px

<span style='font-size: 3em;line-height: 3em'>這個(gè)元素的字體大小是父元素的3倍，283=84px；行高是自己字體的3倍 843 = 252px

PS： span上面的line-height設(shè)置與否，效果是一樣的

行高，樓上兩位都計(jì)算的很清楚了，我來(lái)說(shuō)說(shuō)我理解的原因吧。

px是絕對(duì)單位，不支持IE的縮放，em是相對(duì)單位。

1em指的是一個(gè)字體的大小，它會(huì)繼承父級(jí)元素的字體大小，因此并不是一個(gè)固定的值。

不僅僅是字體，將行距(line-height)，和縱向高度的單位都用em。保證縮放時(shí)候的整體性。em指字體高，任意瀏覽器的默認(rèn)字體高都是16px。所以,未經(jīng)調(diào)整的瀏覽器都符合:1em=16px。那么12px=0.75em,10px=0.625em。

為了簡(jiǎn)化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?6px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說(shuō),只需要將你的原來(lái)的px數(shù)值除以10，然后換上em作為單位就行了。

em有如下特點(diǎn):1.em的值并不是固定的; 2.em會(huì)繼承父級(jí)元素的字體大小。

重寫(xiě)步驟: 1.body選擇器中聲明Font-size=62.5%; 2.將你的原來(lái)的px數(shù)值除以10，然后換上em作為單位;

計(jì)算em單位的字體大小和行距數(shù)值，要避免字體大小的重復(fù)聲明，也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說(shuō)在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時(shí)就只能是1em，而不是1.2em, 因?yàn)榇薳m非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px。

em巧用：中文文章中，一般段首空兩格。如果用px作為單位，對(duì)12px字體來(lái)說(shuō)需要空出24px，對(duì)14px字體來(lái)說(shuō)需要空出28px……這樣換算非常不通用。如果用上em單位，這個(gè)問(wèn)題就很好解決了，1個(gè)字的大小就是1em，那兩個(gè)字的大小就是2em。因此，只需這樣定義就行了：

p { text-indent: 2em; }

由于你父元素設(shè)置了font-size:14px，所以子元素font-size中1em=14px而line-height為3，所以hello的字體大小是214=28px,所以line-height=328=84px由于字體的em會(huì)繼承，所以world的字體大小是2314=84px，所以line-height=3*84=252px

樓上都是正解