这是一个创建于 1139 天前的主题，其中的信息可能已经有所发展或是发生改变。
前几天面试某个西二旗公司，让我说一下 CSS 中的 em 单位，它的计算方式是什么。
我回答：em 的计算是根据当前元素的字号，1em 等于当前字号，2em 等于当前字号乘 2 得到的像素值。
面试官反驳说 em 是根据父元素的字号来计算，我只能说之后我这边再验证一下吧。
---
事后我以为我的记忆出现了偏差，尝试进行查找相关文章，最后发现在简中搜索结果里，大部分文章的结论都是与面试官相同。
陷入了自我怀疑，最后自己动手尝试，验证了确实自己的结论是对的。
发帖子只是想吐槽一下，差点怀疑了世界的真实性。
我回答：em 的计算是根据当前元素的字号，1em 等于当前字号，2em 等于当前字号乘 2 得到的像素值。
面试官反驳说 em 是根据父元素的字号来计算，我只能说之后我这边再验证一下吧。
---
事后我以为我的记忆出现了偏差，尝试进行查找相关文章，最后发现在简中搜索结果里，大部分文章的结论都是与面试官相同。
陷入了自我怀疑，最后自己动手尝试，验证了确实自己的结论是对的。
发帖子只是想吐槽一下，差点怀疑了世界的真实性。
 | 1 danbai PRO 他说的是 rem 吧 |
 | 2 nazalewoyuanyi OP |
 | 3 rabbbit 2022-09-03 11:33:03 +08:00 font-size: 1em 这个根据谁计算？ width: 1em 这个又根据谁计算？ |
 | 4 stein42 2022-09-03 11:34:03 +08:00  7 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units em: 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width |
 | 5 foufoufm 2022-09-03 11:53:08 +08:00 请教一下，主帖中的说的简中是指中文互联网？？ 帖子没看懂。 |
 | 6 otakustay 2022-09-03 12:13:24 +08:00 em 当然是根据父元素来的，不然自己 font-size: 2em 不就死循环了 |
| 8 nazalewoyuanyi OP @otakustay ```css .parent { font-size: 10px; .child { font-size: 20px; width: 1em; } } ``` 如果按照你说的，child 的宽度应该是 10px ，实际上最后的宽度是 20px ，你可以自己验证一下。 |
| 9 rabbbit 2022-09-03 12:50:23 +08:00 em 多用于 font-size ，所以多数面试 em 也默认是用在 font-size 上。 以前的移动端适配和大屏倒是会使用 rem 作为计算单位。 我很好奇在什么情况会使用 width: Xem |
| 10 foufoufm 2022-09-03 13:07:54 +08:00 @otakustay 感谢回复，那其实我觉得面试官有点扯了， 国际规则和国标规则不一样很正常，大概明白这里工作是怎么样就好了。没想到前端的面试这么八股。 |
 | 11 Rache1 2022-09-03 13:36:21 +08:00 font-size 是可继承的 - -，是相对于自身的。 |
 | 12 jarnanchen 2022-09-03 14:07:27 +08:00 歪个楼,楼主头像本人? |
| 13 nazalewoyuanyi OP |
 | 14 h1104350235 2022-09-03 14:25:50 +08:00 面试官的话并不是全对的。 要有一种求真的 |
 | 15 estk 2022-09-03 14:35:09 +08:00 via Android 这考察的是英文，rem 的 r 是 root 根 的意思 |
| 16 otakustay 2022-09-03 14:42:20 +08:00 @zhaomeicheng #8 打字打漏了，em 在 font-size 的时候自然是父元素的字体大小 |
 | 17 learnshare 2022-09-03 15:08:16 +08:00 3 记住核心：em 是一个倍数，em 应该以 font-size 为基准计算 那么： 1. 元素的 font-size: Xem 只能从父元素获得（继承） 2. 元素的其他属性（ Xem ）以自己的 font-size 计算 --- 另外，em/rem 应当只用于文本相关的属性，不应当用于布局相关的属性 |
 | 18 shanmin 2022-09-03 17:17:07 +08:00 1 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units em: 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width |
 | 19 DrakeXiang 2022-09-05 19:12:02 +08:00 学习了，我之前也一直以为 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 ，所谓三人成虎就是这么来的 |
| 20 nazalewoyuanyi OP |
 | 21 coolooks 2022-09-06 14:31:18 +08:00 em 根据上级 font-size 计算，如果上级没有，会根据上上级 font-size 计算，以此类推。 rem 根据根元素 font-size 计算。 |
Select Language