关于 CSS 中的 em 单位的计算， 95%的前端都误解了。

[zhaomeicheng]

前几天面试某个西二旗公司，让我说一下 CSS 中的 em 单位，它的计算方式是什么。

我回答：em 的计算是根据当前元素的字号，1em 等于当前字号，2em 等于当前字号乘 2 得到的像素值。

面试官反驳说 em 是根据父元素的字号来计算，我只能说之后我这边再验证一下吧。


---

事后我以为我的记忆出现了偏差，尝试进行查找相关文章，最后发现在简中搜索结果里，大部分文章的结论都是与面试官相同。

陷入了自我怀疑，最后自己动手尝试，验证了确实自己的结论是对的。

发帖子只是想吐槽一下，差点怀疑了世界的真实性。

[coolooks]

em 根据上级 font-size 计算，如果上级没有，会根据上上级 font-size 计算，以此类推。
rem 根据根元素 font-size 计算。

[danielzz]

@stein42 为什么 font-size 使用是相对父元素，因为 fontsize 具有继承性，所以还是相对自身，right?

[stein42]

html 元素的 font-size 使用 em 是相对于默认字体大小（通常为 16px ）。
其它元素的 font-size 使用 em 是相对于父元素的 font-size 。
其它 CSS 属性使用 em 是相对于本元素的 font-size 。

font-size 设置为 inherit 或 1em 是一样的。

font-size 使用 em 不是相对于自身。
一个元素的 font-size 不能是它的 font-size 的两倍，除非 font-size 为 0 。

@danielzz