前端开发常用单位-em

什么是 em

  • em 是前端开发中的一个动态单位, 是一个相对于 元素字体大小 的单位
  • 例如：font-size: 12px;, 那么 1em 就等于 12px
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 100px;
            height: 200px;
            background: yellow;
        }

        .son {
            font-size: 10px;
            width: 10em;
            height: 10em;
            background: green;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

image-20211118092202376

em 特点

  • 当前元素设置了字体大小, 那么就相对于当前元素的字体大小(这个如上已经演示过了)
  • 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小来进行参考
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 100px;
            height: 200px;
            font-size: 10px;
            background: yellow;
        }

        .son {
            width: 10em;
            height: 10em;
            background: green;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>
  • 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于 浏览器 默认的字体大小
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 100px;
            height: 200px;
            background: yellow;
        }

        .son {
            width: 10em;
            height: 10em;
            background: green;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

image-20211118092717298

结论: em 是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)

End

posted @ 2021-11-18 09:28  BNTang  阅读(405)  评论(0)    收藏  举报