CSS單位em是相對於父元素仍是當前元素的字體大小？

時間 2019-11-08

標籤 css 單位相對於元素仍是當前字體大小欄目 CSS 简体版

原文原文鏈接

em是CSS中一個比較經常使用的相對單位，所以有必要注意一些坑點。css

1em等於當前元素的字體大小，除非你在設置font-size

有不少文章說1em是等於父元素的字體大小！這種說法其實是不許確的。看如下例子：html

<!DOCTYPE html>
<html lang="en">

<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>

<div>會被padding-bottom撐開，而padding-bottom的高度是64px，而不是32px！這證實了1em等於當前元素的字體大小（只有一個例外，下面會講）。瀏覽器

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

爲何有人誤認爲1em等於父元素的字體大小呢？這是由於若是在設置font-size的時候使用em單位，此時font-size仍是默認值inherit，所以此時1em還等於父元素的字體大小。這是在設置font-size時纔有的特例！這個特例很好理解，畢竟我正在設置當前元素的字體大小呢！總不能使用此刻正在設置的字體大小做爲單位吧！這不是悖論嗎！字體

舉個例子，若是這個悖論真的發生了，就會出現如下狀況：水果店老闆對你說：「你要多少斤橘子，我給你裝起來」，而你卻對老闆說：「我要的數量是我最終要的數量的2倍」。這個時候水果店老闆估計就要崩潰了，他到底要給你裝多少橘子呢？
爲了不這種事情發生，在你指定數量的時候若是使用 相對單位，那這個單位一定不能相對於你此刻所指定的數量。你能夠對老闆這樣說：「我要的數量是上一個顧客買的2倍」（類比於設置 font-size: 2em）。當你買完橘子之後，又能夠對老闆這樣說：「我還要一些蘋果，數量是剛纔買的橘子的2倍」（類比於設置 padding-bottom: 2em）。

除了這個特例之外，當設置其餘css屬性的時候，1em就等於當前元素的字體大小。ui

在上面的例子中，設置font-size的時候使用em，就能證實這個特例的存在：code

<!DOCTYPE html>
<html lang="en">

<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 了。htm

若是在根元素上的font-size使用em會怎麼樣呢？它沒有父元素了啊！不要緊，對於inherited properties（其中就包括font-size），在根元素上的默認值爲initial，對於大部分瀏覽器，font-size的initial值就是16px。所以在設置根元素上的font-size時，它的值仍是16px，1em也就等於16px。rem

<!DOCTYPE html>
<html lang="en">

<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>

參考資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。