CSS 的相对单位 em 与 ex

相对单位之所以得名，是因为它们是根据与其他事物的关系来度量的，共有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>

注意下图三行的左边距

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 一致