V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 外包信息请发到 /go/outsourcing 节点。
• 不要把相同的信息发到不同的节点
zhaomeicheng
V2EX  ›  酷工作

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

  •  
  •   zhaomeicheng · 2022-09-03 11:25:07 +08:00 · 2433 次点击
    这是一个创建于 791 天前的主题,其中的信息可能已经有所发展或是发生改变。
    前几天面试某个西二旗公司,让我说一下 CSS 中的 em 单位,它的计算方式是什么。

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

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


    ---

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

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

    发帖子只是想吐槽一下,差点怀疑了世界的真实性。
    23 条回复    2022-09-08 11:05:03 +08:00
    danbai
        1
    danbai  
       2022-09-03 11:26:35 +08:00 via Android
    他说的是 rem 吧
    zhaomeicheng
        2
    zhaomeicheng  
    OP
       2022-09-03 11:28:47 +08:00
    @danbai
    并不是。
    因为我们是先讨论完 rem 的计算是通过根元素的字号来进行计算,之后又问的 em.
    rabbbit
        3
    rabbbit  
       2022-09-03 11:33:03 +08:00
    font-size: 1em 这个根据谁计算?
    width: 1em 这个又根据谁计算?
    stein42
        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
    foufoufm
        5
    foufoufm  
       2022-09-03 11:53:08 +08:00
    请教一下,主帖中的说的简中是指中文互联网??

    帖子没看懂。
    otakustay
        6
    otakustay  
       2022-09-03 12:13:24 +08:00
    em 当然是根据父元素来的,不然自己 font-size: 2em 不就死循环了
    Exdui
        7
    Exdui  
       2022-09-03 12:15:09 +08:00
    @foufoufm 简体中文互联网
    zhaomeicheng
        8
    zhaomeicheng  
    OP
       2022-09-03 12:31:55 +08:00
    @otakustay

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

    .child {
    font-size: 20px;
    width: 1em;
    }
    }
    ```
    如果按照你说的,child 的宽度应该是 10px ,实际上最后的宽度是 20px ,你可以自己验证一下。
    rabbbit
        9
    rabbbit  
       2022-09-03 12:50:23 +08:00
    em 多用于 font-size ,所以多数面试 em 也默认是用在 font-size 上。
    以前的移动端适配和大屏倒是会使用 rem 作为计算单位。
    我很好奇在什么情况会使用 width: Xem
    foufoufm
        10
    foufoufm  
       2022-09-03 13:07:54 +08:00
    @otakustay 感谢回复,那其实我觉得面试官有点扯了, 国际规则和国标规则不一样很正常,大概明白这里工作是怎么样就好了。没想到前端的面试这么八股。
    Rache1
        11
    Rache1  
       2022-09-03 13:36:21 +08:00
    font-size 是可继承的 - -,是相对于自身的。
    jarnanchen
        12
    jarnanchen  
       2022-09-03 14:07:27 +08:00
    歪个楼,楼主头像本人?
    zhaomeicheng
        13
    zhaomeicheng  
    OP
       2022-09-03 14:15:12 +08:00
    @rabbbit

    我觉得,大多数情况下、默认 XXX ,只是用来掩盖自己的知识掌握不够全面的一个说辞而已。
    h1104350235
        14
    h1104350235  
       2022-09-03 14:25:50 +08:00
    面试官的话并不是全对的。
    要有一种求真的
    estk
        15
    estk  
       2022-09-03 14:35:09 +08:00 via Android
    这考察的是英文,rem 的 r 是 root 根 的意思
    otakustay
        16
    otakustay  
       2022-09-03 14:42:20 +08:00
    @zhaomeicheng #8 打字打漏了,em 在 font-size 的时候自然是父元素的字体大小
    learnshare
        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 应当只用于文本相关的属性,不应当用于布局相关的属性
    shanmin
        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
    DrakeXiang
        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 ,所谓三人成虎就是这么来的
    zhaomeicheng
        20
    zhaomeicheng  
    OP
       2022-09-05 20:29:26 +08:00
    @DrakeXiang

    mdn 的中文翻译烂的一批
    coolooks
        21
    coolooks  
       2022-09-06 14:31:18 +08:00
    em 根据上级 font-size 计算,如果上级没有,会根据上上级 font-size 计算,以此类推。
    rem 根据根元素 font-size 计算。
    danielzz
        22
    danielzz  
       2022-09-08 09:13:35 +08:00
    @stein42 为什么 font-size 使用是相对父元素,因为 fontsize 具有继承性,所以还是相对自身,right?
    stein42
        23
    stein42  
       2022-09-08 11:05:03 +08:00
    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
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2652 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:19 · PVG 20:19 · LAX 05:19 · JFK 08:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.