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 计算。 |