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

[zhaomeicheng]

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

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

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


---

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

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

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

[danbai]

他说的是 rem 吧

[zhaomeicheng]

@danbai
并不是。
因为我们是先讨论完 rem 的计算是通过根元素的字号来进行计算，之后又问的 em.

[rabbbit]

font-size: 1em 这个根据谁计算？
width: 1em 这个又根据谁计算？

[stein42]

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units
em: 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width

[foufoufm]

请教一下，主帖中的说的简中是指中文互联网？？

帖子没看懂。

[otakustay]

em 当然是根据父元素来的，不然自己 font-size: 2em 不就死循环了

[Exdui]

@foufoufm 简体中文互联网

[zhaomeicheng]

@otakustay

```css
.parent {
font-size: 10px;

.child {
font-size: 20px;
width: 1em;
}
}
```
如果按照你说的，child 的宽度应该是 10px ，实际上最后的宽度是 20px ，你可以自己验证一下。

[rabbbit]

em 多用于 font-size ，所以多数面试 em 也默认是用在 font-size 上。
以前的移动端适配和大屏倒是会使用 rem 作为计算单位。
我很好奇在什么情况会使用 width: Xem

[foufoufm]

@otakustay 感谢回复，那其实我觉得面试官有点扯了， 国际规则和国标规则不一样很正常，大概明白这里工作是怎么样就好了。没想到前端的面试这么八股。

[Rache1]

font-size 是可继承的 - -，是相对于自身的。

[jarnanchen]

歪个楼,楼主头像本人?

[zhaomeicheng]

@rabbbit

我觉得，大多数情况下、默认 XXX ，只是用来掩盖自己的知识掌握不够全面的一个说辞而已。

[h1104350235]

面试官的话并不是全对的。
要有一种求真的

[estk]

这考察的是英文，rem 的 r 是 root 根 的意思

[otakustay]

@zhaomeicheng #8 打字打漏了，em 在 font-size 的时候自然是父元素的字体大小

[learnshare]

记住核心：em 是一个倍数，em 应该以 font-size 为基准计算

那么：
1. 元素的 font-size: Xem 只能从父元素获得（继承）
2. 元素的其他属性（ Xem ）以自己的 font-size 计算

---

另外，em/rem 应当只用于文本相关的属性，不应当用于布局相关的属性

[shanmin]

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units

em: 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width

[DrakeXiang]

学习了，我之前也一直以为 em 是永远相对于父元素字体大小的。
不过要说的是，让你们不要看翻译的二手资料，即使是 mdn 的翻译也不准的。。

英文说的是 `Font size of the parent, in the case of *typographical properties like font-size*, and font size of the element itself, in the case of other properties like width.`

到了中文就直接只剩了 font-size ，所谓三人成虎就是这么来的

[zhaomeicheng]

@DrakeXiang

mdn 的中文翻译烂的一批

[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