首頁 > web前端 > css教學 > 主體

css中em是相對於父元素還是目前元素的大小? (程式碼範例)

不言
發布: 2018-10-24 16:58:14
轉載
3158 人瀏覽過

這篇文章帶給大家的內容是關於css中em是相對於父元素還是當前元素的大小? (程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

em是CSS中一個比較常用的相對單位,因此有必要注意一些坑點。

1em等於目前元素的字體大小,除非你在設定font-size

有很多文章說1em是等於父元素的字體大小!這種說法其實是不準確的。看以下例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        div {
            font-size: 32px;
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>
登入後複製

會被padding-bottom撐開,而padding-bottom的高度是64px,而不是32px!這證明了1em等於目前元素的字體大小(只有一個例外,下面會講)。

字體大小和長度有什麼關係呢?字體不是一個方塊嗎?實際上,字體大小被定義為M的寬度。

為什麼有人誤認為1em等於父元素的字體大小呢?這是因為如果在設定font-size的時候使用em單位,此時font-size還是預設值inherit,因此此時1em還等於父元素的字體大小。這是在設定font-size時才有的特例!這個特例很好理解,畢竟我正在設定當前元素的字體大小呢!怎麼能用此刻正在設定的字體大小作為單位呢!這不是悖論嗎!

舉個例子,如果這個悖論真的發生了,就會出現以下情況:水果店老闆對你說:“你想要多少斤橘子,我給你裝起來”,而你卻對老闆說: 「我要的數量是我最終要的數量的2倍」(類比於設定font-size: 2em)。這時候水果店老闆估計就要崩潰了,他到底要裝多少橘子給你呢?
為了避免這種事情發生,在你指定數量的時候如果使用相對單位,那麼這個單位必定不能相對於你此刻所指定的數量。你可以對老闆這樣說:「我要的數量是上一個顧客買的2倍」(類比於設定font-size: 2em)。當你買完橘子以後,又可以對老闆這樣說:「我還要一些蘋果,數量是剛才買的橘子的2倍」(類比於設定padding-bottom: 2em)。

除了這個特例以外,當設定其他css屬性的時候,1em就等於目前元素的字體大小。

在上面的例子中,設定font-size的時候使用em,就能證明這個特例的存在:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 16px;
        }
        div {
            font-size: 2em;  /* 仅仅这一行改变了! */
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
登入後複製

最終高度依然是64px,因為在設定font-size的時候,1em == 16px;在設定padding-bottom的時候,1em 就等於32px 了。

如果在根元素上的font-size使用em會怎麼樣呢?它沒有父元素了啊!沒關係,對於inherited properties(其中就包含font-size),在根元素上的預設值為initial,對於大部分瀏覽器,font-size的initial值就是16px。因此在設定根元素上的font-size時,它的值還是16px,1em也等於16px

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            /* 2*16px=32px */
            font-size: 2em;
        }
        div {
            /* 2*32px=64px */
            font-size: 2em;
            /* 2*64px=128px */
            padding-bottom: 2em;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
</body>
</html>
登入後複製

以上是css中em是相對於父元素還是目前元素的大小? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板