根据css中em是相对于父元素还是当前元素的大小详细解析介绍

本篇文章给大家带来的内容是关于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>

<div>会被padding-bottom撑开,而padding-bottom的高度是64px,而不是32px!这证明了1em等于当前元素的字体大小(只有一个例外,下面会讲)。

字体大小和长度有什么关系呢?字体不是一个方块吗?实际上,字体大小被定义为M的宽度。

为什么有人误认为1em等于父元素的字体大小呢?这是因为如果在设置font-size的时候使用em单位,此时font-size还是默认值inherit,因此此时1em还等于父元素的字体大小。这是在设置font-size时才有的特例!这个特例很好理解,毕竟我正在设置当前元素的字体大小呢!怎么能用此刻正在设置的字体大小作为单位呢!这不是悖论吗!

举个例子,如果这个悖论真的发生了,水果店老板会问你:“你要几斤橘子?我来装。”说的时候,你对老板说:“我想要的数量是我想要的数量的两倍。”(和设置font-size: 2em差不多。)这个时候水果店老板快崩溃了,他到底要给你装多少橘子?
为了避免这种情况发生,如果在指定数量时使用相对单位,则这个单位不一定与你现在指定的数量相关。(大卫·亚设,Northern Exposure)你可以对老板说:”我要的数量是以前顾客买的2倍.”(类似于Font-size 101162em设置。)你买完橘子后,还可以对老板这样说。“我还需要一些苹果。数量是刚买的橘子的2倍。”(相当于安装Padding-Bottom 101162em。)

除了这个特例以外,当设置其他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>
© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容