【CSS】em单位的理解

1、em单位的定义

MDN的解释：它是相对于父元素的字体大小的一个单位。

例如：父元素font-size：16px；子元素的font-size：2em（也就是32px）

注：有一个误区，虽然他是一个相对单位，并且官方对它的解释是相对于父元素字体大小的一个单位，但是它是放在了文字属性里面，也就说只有子元素的font-size是起作用的，子元素的其他的属性是不相对于父元素的，而是相对于本身的font-size大小

2、举例证明

大家可以拿这段代码验证一下

<style>.div {display: inline-block;font-size: 16px;}.red {font-size: 2em; // 32pxpadding: 1em; // 32pxwidth: 100px;height: 100px;background-color: red;margin-bottom: 100px;}
</style><div class="div"><div class="red">123</div>
</div>