Question

以下代码说明了我有关在格式化结构内容（例如宽度，高度，边框宽度等）时使用EM而不是REM的问题

使用EM的第一个示例产生的盒结果不同于其他两个。为什么会这样，因为字体大小符合预期并且该样式是从html样式继承的（尽管我猜测未提供它看起来与REM样式并不相同）。

https://jsfiddle.net/AndyMP/L7jshu9c/11/

html {
  font-size: 1em; /* 16px */
}

.box1 {
  width: 10em;
  border: solid .25em black;
  font-size: 1.5em;
}

.box2 {
  width: 10rem;
  border: solid .25rem black;
  font-size: 1.5rem;
}

.box3 {
  width: 160px;
  border: solid 4px black;
  font-size: 24px;
}

<div class="box1">Ems</div>

<div class="box2">Rems</div>

<div class="box3">Pxs</div>

更新：我可能会在这里回答我自己的问题，但是好像div标签之间的字体大小是先设置的，然后根据该字体大小确定该div的width和border元素的大小。也许有人可以确认为什么会这样...

Answer 1

很好的问题，rem中的'r'代表'root'。 em个孩子继承了父母的大小并计算出给孩子的额外大小。使用rem时，它仅计算此实例html中的根赋予它的根。

为什么会给出不同的结果？

因为您将框设置为1.5em。字体大小为24px，因此您的框宽为240px。

rem变体仍然保留16px的根值，因此保持在160px。

请参见下面的示例。

html { font-size: 10px }

.em { 
  padding: 15px;
  font-size: 1.4em;
  border: 1px solid grey;
}

.em div {
  font-size: 1.4em;
}

.rem { 
  padding: 15px;
  font-size: 1.4rem;
  border: 1px solid grey;
}

.rem div {
  font-size: 1.4rem;
}

<html>
<div class="em">
  <strong>EM</strong>
  <div>layer 1
    <div>layer 2
      <div>layer 3</div>
    </div>
  </div> 
</div>
<div class="rem">
  <strong>REM</strong>
  <div>layer 1
    <div>layer 2
      <div>layer 3</div>
    </div>
  </div>
</div>
</html>

EM与REM的结构含量

1 个答案: