CSS 的相对单位 em 与 ex

- 日理万妓 2022-04-17 00:43 208阅读 0赞

相对单位之所以得名，是因为它们是根据与其他事物的关系来度量的，共有3种相对长度单位：`em`、`ex` 和 `px`。

前两个单位代表 `em-height` 和 `x-height`，这是常用的印刷度量单位。

而 px 代表“像素”，这个值被定义为相对单位，因为它取决于显示设备的分辨率。

#### em ####

在 CSS 中，em 定义为一种给定字体的 font-size 值。如果一个元素的 `font-size: 14px`，那么对于该元素，`1em = 14px`。

例如一个 h1 的字体大小为 24px，一个 h2 字体大小为 18px，一个 h3 字体大小为12px，如果给这三个元素设置 `margin-left: 1em;`，那么它们的左边距就分别为 24px、18px、12px。

h1, h2, h3 { 
        margin-left: 1em;
      }

<h1>hello h1</h1>
      <h2>hello h2</h2>
      <h3>hello h3</h3>

> 注意下图三行的左边距

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE_size_16_color_FFFFFF_t_70]

`em` 这个单位非常灵活，比如首行缩进两个字符的实现就可以用到 em：`text-indent: 2em;`

#### ex ####

和 `em` 不同的是，`ex` 是指**所用字体中小写 x 的高度，通常为字体高度的一半**。

div { 
        display: inline-block;
        font-size: 18px;
      }
      .x { 
        width: 50px;
        height: 1ex;
        background: red;
      }

<h4>定义一条与 x 一样高的线</h4>
      <div>yyypppxxx</div>
      <div class="x"></div>

效果如下，注意红色盒子高度只与 x 一致

![在这里插入图片描述][20181110170035686.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p3a2trazE_size_16_color_FFFFFF_t_70]: /images/20220417/e35246160cd34b9bb7936f7a83ace172.png
[20181110170035686.png]: /images/20220417/55a295c9dd614bd298fa353f3b9a091f.png