css3 - css line-height和font-size高度问题,谁能帮忙解释一下呢
ringa_lee
ringa_lee 2017-04-17 11:35:02
0
4
954
<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所在元素的实际行高是多少呢,原因是什么呢?

ringa_lee
ringa_lee

ringa_lee

全部回覆(4)
阿神


這個元素的字體大小是父元素的2倍,214=28px,行高是自己字體的3倍28 3 = 84px


這個元素的字體大小是父親元素的3倍,283=84px;行高是自己字體的3倍843 = 252px

PS: span上面的line-height設定與否,效果是一樣的

小葫芦

行高,樓上兩位都計算的很清楚了,我來說說我理解的原因吧。

px是絕對單位,不支援IE的縮放,em是相對單位。

1em指的是一個字體的大小,它會繼承父級元素的字體大小,因此並不是固定的值。

不只是字體,將行距(line-height),和縱向高度的單位都用em。保證縮放時候的整體性。
em指字體高,任意瀏覽器的預設字體高都是16px。所以,未經調整的瀏覽器都符合:1em=16px。則12px=0.75em,10px=0.625em。

為了簡化font-size的換算,需要在css中的body選擇器中宣告Font-size=62.5%,這就使em值變成16px*62.5%=10px,這樣12px=1.2em,10px= 1em,也就是說,只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

em有以下特點:
1.em的值並不是固定的;
2.em會繼承父級元素的字體大小。

重寫步驟:
1.body選擇器中聲明Font-size=62.5%;
2.將你的原來的px數值除以10,然後換上em作為單位;

計算em單位的字體大小和行距數值,要避免字體大小的重複聲明,也就是避免1.2 * 1.2= 1.44的現象。比如說在#content中聲明了字體大小為1.2em,那麼在聲明p的字體大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼承#content的字體高而變為了1em=12px。

em巧用:
中文文章中,一般段首空兩格。如果用px當單位,對12px字體來說需要空出24px,對14px字體來說需要空出28px…這樣換算非常不通用。如果用上em單位,這個問題就很好解決了,1個字的大小就是1em,那兩個字的大小就是2em。因此,只需這樣定義就行了:

p { text-indent: 2em; }

Peter_Zhu

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

Ty80

樓上都是正解

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板