为什么CSS中的百分比值是相对于元素本身进行转换的？

Question

众所周知，CSS 中的百分比值在翻译元素本身的大小相对而言是相对的，而（据我所知）应用于任何其他属性时它们是相对于父级大小的。例如，在我们的浏览器中出现 flexbox 或 grid 之前，这已被广泛用于垂直居中元素。

.wrapper {
  width: 500px;
  height: 200px;
  background-color: lightgray;
}

#element {
  width: 42px;
  height: 42px;
  background-color: red;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  

<div class="wrapper">
  <div id="element"></div>
</div>

在这个例子中，我们可以看到50%应用于left和top属性，是指相对于.wrapper的宽度（或高度，对于top）的50％，因此分别为250px和100px。但是在translate中，-50％应用于#element本身，因此它是42px的50％。

我看到了它的好处，但我不明白这种（表面上的）不一致的原因。所以，

1.为什么CSS翻译中的百分比值是相对于元素本身而不是相对于父元素大小的？ 2.还有其他具有此行为的属性吗？

编辑：正如SergeS的答案中所述，我在MDN中看到所有属性都有自己的参考<percentage>值的定义。

在transform中，

引用块： 百分比-指边界框的大小。

在top中，

百分比 - 指的是包含块的高度。

在 margin 中，

百分比 - 指的是包含块的宽度。

我很好奇这些定义的原因。

- Jordi Nebot

---

translate属性对元素的操作不涉及在浏览器上重新绘制像素，只是将其从一个位置移动到另一个位置。我想，其他与此相关的属性将包括所有变换属性。 - Shubham Agrawal

谢谢@ShubhamAgrawal。你知道关于重绘像素理论的任何来源吗？ - Jordi Nebot

你可以参考[https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count]。 - Shubham Agrawal

Answer 1

1. • 翻译 = 根据定义翻译当前元素。因此，它考虑当前元素
   • left、top等和其他位置属性-它们定义元素在父元素中的位置-因此，它们计算偏移父元素的位置（相对定位的父元素，绝对/固定元素的最近相对/绝对/固定元素）
   • padding、margin等和其他盒模型属性-它们定义元素在父元素内部的大小-所以它们再次与父容器相关

2. 不是

- SergeS

---

谢谢您的回答。根据定义，translate 以元素本身作为参考似乎是解释这种行为的一个很好的理由。我想知道为什么... - Jordi Nebot

Answer 2

在这两种情况下，值都与元素本身相关。

在第一种情况下，当你说left:50%和top:50%时，它只是意味着从第一个相对定位的父级（默认为body）开始通过测量偏移量，将元素保持在距离顶部和左侧50％的位置上。

在第二种情况下，当你说 translate 时，它意味着你正在使用给定的值通过translate方法转换元素。

- K K

---

谢谢你的答复。我必须说我不太明白。我在#element的多个属性中使用了50％，例如在x轴上，“left” 50％的值为250px，但在“translate”的x坐标中，它的值为21px，因此参考显然不同。此外，我不明白第二种情况如何影响元素的大小... - Jordi Nebot