% 和 em 和有什么不一样？

Question

% 和 em 长度值有什么区别？如果包含元素的字体大小为 10px，则 1em = 10px 等为 100% = 10px。Stackoverflow 中的所有答案都没有回答这个特定问题。

Answer 1

em是与相关元素的当前字体大小的相对度量。1em 等于相关元素的当前字体大小。

如果您没有在页面上的任何位置设置字体大小，那么它将是浏览器默认值，可能是 16px。所以默认情况下 1em = 16px。如果你要在你的身体上设置 20px 的字体大小，那么 1em = 20px。

%但不依赖于任何特定属性。当您将其应用于不同的属性时，它的参考会发生变化。

看这个例子：

section{
  width:100%;
}
div{
  width:50px;
  height:50px;
  margin:0;
  padding:0;
}
.a{
  background-color:red;
}
.b{
  background-color:blue;
  width:2em;
}
.c{
  background-color:green;
  width:50%;
}

<section>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</section>