什么是 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>

前端开发常用单位-em_html

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>

前端开发常用单位-em_移动Web开发+项目实战_02


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


前端开发常用单位-em_前端开发_03