• 外包信息请发到 /go/outsourcing 节点。
• 不要把相同的信息发到不同的节点
这是一个创建于 811 天前的主题，其中的信息可能已经有所发展或是发生改变。
前几天面试某个西二旗公司，让我说一下 CSS 中的 em 单位，它的计算方式是什么。
我回答：em 的计算是根据当前元素的字号，1em 等于当前字号，2em 等于当前字号乘 2 得到的像素值。
面试官反驳说 em 是根据父元素的字号来计算，我只能说之后我这边再验证一下吧。
---
事后我以为我的记忆出现了偏差，尝试进行查找相关文章，最后发现在简中搜索结果里，大部分文章的结论都是与面试官相同。
陷入了自我怀疑，最后自己动手尝试，验证了确实自己的结论是对的。
发帖子只是想吐槽一下，差点怀疑了世界的真实性。
我回答：em 的计算是根据当前元素的字号，1em 等于当前字号，2em 等于当前字号乘 2 得到的像素值。
面试官反驳说 em 是根据父元素的字号来计算，我只能说之后我这边再验证一下吧。
---
事后我以为我的记忆出现了偏差，尝试进行查找相关文章，最后发现在简中搜索结果里，大部分文章的结论都是与面试官相同。
陷入了自我怀疑，最后自己动手尝试，验证了确实自己的结论是对的。
发帖子只是想吐槽一下，差点怀疑了世界的真实性。
 |
1
danbai 2022-09-03 11:26:35 +08:00 via Android
他说的是 rem 吧
|
 |
2
zhaomeicheng 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
zhaomeicheng 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
zhaomeicheng 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
zhaomeicheng OP |
 |
21
coolooks 2022-09-06 14:31:18 +08:00
em 根据上级 font-size 计算，如果上级没有，会根据上上级 font-size 计算，以此类推。
rem 根据根元素 font-size 计算。 |
Select Language