3

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

 2 years ago
source link: https://www.v2ex.com/t/877412
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

• 换工作是一件经过深思熟虑的严肃事情

• 频繁换工作是 loser 做的事情

• 公司应该提供给员工尽可能好的条件

• 这里不欢迎苦大仇深的公司

• 原则上这里不欢迎猎头发帖，除非是懂技术的猎头

• 如果你自己从来没有从期权上赚过钱，就不要在招聘时强调期权

• 招聘时请尽量给出薪酬范围

• 求职时请附上自己的薪酬要求

• 说话前经过足够的思考是好习惯

• 上传一个有意义的头像会更体现你们公司的品牌和诚意

• 请不要在 1 天的时间内在酷工作节点发布超过 3 个主题

• 请不要在不同节点下发布内容相同的主题

Sponsored by

全球远程工作召集令 · 好工作，告别内卷，工作生活平衡不是梦2000 个全球远程好工作，帮助 V2EX 的小伙伴开启全新的工作方式。

Promoted by LinkedIn

V2EX  ›  酷工作

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

  zhaomeicheng · 11 小时 3 分钟前 · 727 次点击
前几天面试某个西二旗公司，让我说一下 CSS 中的 em 单位，它的计算方式是什么。

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

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


---

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

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

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

danbai      11 小时 1 分钟前 via Android

他说的是 rem 吧
zhaomeicheng

zhaomeicheng      10 小时 59 分钟前

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

rabbbit      10 小时 55 分钟前

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

foufoufm      10 小时 35 分钟前

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

帖子没看懂。
otakustay

otakustay      10 小时 15 分钟前

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

Exdui      10 小时 13 分钟前

@foufoufm 简体中文互联网
zhaomeicheng

zhaomeicheng      9 小时 56 分钟前

@otakustay

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

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

rabbbit      9 小时 38 分钟前

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

foufoufm      9 小时 20 分钟前

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

Rache1      8 小时 52 分钟前

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

jarnanchen      8 小时 21 分钟前

歪个楼,楼主头像本人?
zhaomeicheng

zhaomeicheng      8 小时 13 分钟前

@rabbbit

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

h1104350235      8 小时 2 分钟前

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

estk      7 小时 53 分钟前 via Android

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

otakustay      7 小时 46 分钟前

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

learnshare      7 小时 20 分钟前

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

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

---

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK