CSS—相对单位em | 易学教程

一、概述

em是一个相对长度单位，它的单位长度取决于当前元素行内文本的字体尺寸，如当前元素行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸。em最初是指字母M的宽度，故名em，现指字符宽度的倍数，用法类似百分比，如：0.8em、1.2em、2em等。

em可以设置width、height、line-height、margin、padding、border等样式。在响应式和移动设计的大环境下，使用em能更方便快捷的一次性调整Web文档及其html元素的字体大小、宽度、高度、边距、边框等一系列属性，一般来说使用em作为单位比px更灵活。

二、详解

浏览器中的文本字体尺寸一般默认为16px，即默认情况下：

1em = 16px

div {
    width: 10em;
    height: 10em; 
    background-color: red;
    /* 10em = 10 * 16 = 160px */
}

尝试改变字体尺寸，如下所示。

div {
    width: 10em;
    height: 10em; 
    background-color: red;
    font-size: 20px;
    /* 10em = 10 * 20 = 200px */
}

三、注意事项

继承

元素的字体尺寸默认会继承父标签的字体尺寸。

<style>
    div {
        font-size: 20px;
        width: 10em;  /* 10em = 10 * 20px = 200px */
        height: 10em;
        background-color: red;
    }
        
    span {
        display: block;
        width: 5em;  /* 5em = 5 * 20 = 100px */
        height: 5em;
        background: yellow;
    }
</style>
<div>
    <span></span>
</div>

级联

使用em为当前元素设置字体尺寸时，采用级联的方式计算尺寸。当设置字体尺寸后，它会逐级向上相乘。例如一个字体尺寸设置为2em的元素在另一个字体尺寸为2em的元素里，而这个元素又在另一个字体尺寸为2em的元素里，那么最后的计算结果是2 * 2 * 2 = 8rem（根em）。

使用em设置当前元素字体尺寸时，em取决于其父标签的字体尺寸。使用em设置当前元素的宽高等样式时，em取决于当前元素的字体尺寸。

<style>
    .one {
        font-size: 2em;   /* 2em = 2 * 16 = 32px  */
        width: 10em;      /* 10em = 10 * 32 = 320px  */
        height: 10em;
        background-color: red;
    }        
    .two {
        font-size: 2em;   /* 2em = 2 * 32 = 64px  */
        width: 2em;       /* 2em = 2 * 64 = 128px  */
        height: 2em;
        background-color: green;
    }
    .three {
        font-size: 2em;   /* 2em = 2 * 64 = 128px  */
        width: .5em;      /* .5em = .5 * 128 = 64px  */
        height: .5em;
        background-color: blue;
    }
</style>
<div class="one">
    <div class="two">
        <div class="three"></div>
    </div>
</div>

rem与em的区别

rem也是一个相对单位，1rem等于根标签html的字体尺寸，即根em。通过设置根标签的字体尺寸，可以改变rem，从而形成一个可控的统一参考系。

rem有两种思路。其一设置rem所代表的尺寸大小与屏幕宽度成正比。其二设置rem所代表的尺寸大小与px容易换算，方便按照设计稿写CSS，此时可以使用媒体查询动态修改根标签的字体尺寸来适配。

rem取决于根标签的字体尺寸，em取决于当前标签字体尺寸或其父标签字体尺寸（使用em设置当前元素字体尺寸时）。

来源：CSDN

作者：空城里的往日时光

链接：https://blog.csdn.net/weixin_42472040/article/details/103751188

标签

html字体

font-size

css