“%”和“em”有什么区别？

Question

什么是％和em长度值之间的区别？如果包含元素的字体大小为10px，则1em = 10px，100％也是10px。Stackoverflow中的答案均未回答此特定问题。

- user7339197

---

可能是CSS中像素和百分比的区别是什么？的重复问题。 - aavrug

阅读此链接 http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ - priya_singh

该链接并没有完全解释 em 和 % 之间的区别。 - user7339197

请参考以下链接：https://dev59.com/knVC5IYBdhLWcg3w-WOs - Chris Happy

可能是px，em和ex之间的区别是什么？的重复问题。 - Madan Bhandari

Answer 1

em单位取决于font-size。 它可以用于适应大小改变/缩放的文本。

在下面的代码片段中，您可以看到差异：

let list = document.querySelectorAll('.fs');

let fs = 10;
setInterval(() => {
  if (fs > 36) fs = 10;
  list.forEach(el => el.style.fontSize = fs+'pt');
  fs += 1;
}, 100)

.em {
  width: 2em;
  background-color: cyan;
}
.perc {
  width: 10%;
  background-color: pink;
}

<div class="em fs">2em</div>
<div class="perc fs">10%</div>

- vp_arth

---

% 取决于什么？ - user7339197

在最近的父级 position:relative/absolute 容器大小上。在我的代码片段中，它是 document.body 的宽度。 - vp_arth

Answer 2

em是相对于所讨论元素的当前字体大小的一种度量。1个em等于所讨论元素的当前字体大小。

如果您在页面上没有设置字体大小，则它将是浏览器默认值，可能是16px。因此，默认情况下1em = 16px。如果您在body上设置了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>

- ab29007

---

B=100像素，A=?，C=? - user7339197

因为100%=full size it can extend，所以它的大小可以延伸到父元素的大小。 - ab29007

C 的父元素是覆盖整个屏幕的区域。因此，如果屏幕宽度为800像素，则 C 的宽度将为400像素。 - ab29007

如果区块占50%，那么B=(2*8=16px)吗？ - user7339197

所以简单来说，2em 是它字体大小的两倍，而 200% 是它父元素大小的两倍。 - ab29007