结论

em是根据当前元素字体大小而变化的，而当前元素字体大小一般继承自父元素，所以在未定义当前元素字体大小的时候，em看起来和父元素字体大小有关

em用在自身font-size属性上时是以父元素的font-size为参考，其他属性则是以当前元素字体大为参照

参见developer.mozilla.org 相对单位长度 2021年02月26日补充

html

  <div id="app">
    <div class="child1">1</div>
    <div class="child2">2</div>
    <div class="child3">3</div>
  </div>

css

#app {
  font-size: 100px;
}
html {
  font-size: 50px;
}
.child1 {
  width: 1rem;
  background-color: #f00;
}
.child2 {
  width: 1em;
  background-color: #0f0;
}
.child3 {
  // 自身font-size以父元素font-size为参照
  font-size: 2em;
  // 其他元素以自身font-size为参照
  width: 1em;
  background-color: #00f;
}

效果

codesandbox在线demo，效果如下：

效果分析

1. child1宽度为1rem === 50px，宽度与根元素html的字体大小有关
2. child2宽度为1em === 100px，并且没有定义自己的字体大小，宽度与父元素的字体大小有关
3. child3宽度为1em === 200px，定义了自己的字体大小，宽度与父元素的字体大小并没有关系