CSS单位em是相对于父元素还是当前元素的字体大小？
em是CSS中一个比较常用的相对单位，因此有必要注意一些坑点。
1em等于当前元素的字体大小，除非你在设置font-size
有很多文章说1em是等于父元素的字体大小！这种说法实际上是不准确的。看以下例子：
<!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倍”（类比于设置
font-size: 2em）。当你买完橘子以后，又可以对老板这样说：“我还要一些苹果，数量是刚才买的橘子的2倍”（类比于设置padding-bottom: 2em）。除了这个特例以外，当设置其他css属性的时候，1em就等于当前元素的字体大小。
在上面的例子中，设置font-size的时候使用em，就能证明这个特例的存在：
<!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 了。
如果在根元素上的font-size使用em会怎么样呢？它没有父元素了啊！没关系，对于inherited properties（其中就包括font-size），在根元素上的默认值为initial，对于大部分浏览器，font-size的initial值就是16px。因此在设置根元素上的font-size时，它的值还是16px，1em也就等于16px。
<!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>参考资料
相关推荐
xceman 2020-09-22
bcbeer 2020-08-27
风萧萧梦潇 2020-08-17
夕加加 2020-07-20
LuckyDeng 2020-07-08
huangchunxia 2020-07-08
lbPro0 2020-07-05
葉無聞 2020-07-05
万里之书 2020-07-04
冰蝶 2020-07-04
yuzhongdelei0 2020-07-04
meiseeny 2020-06-28
RuoShangM 2020-06-28
bianxq 2020-06-28
80327065 2020-06-28
Codeeror 2020-06-28
somyjun 2020-06-25
xuanlvhaoshao 2020-06-16