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>

CSS单位em是相对于父元素仍是当前元素的字体大小？

1em等于当前元素的字体大小，除非你在设置font-size

参考资料