css - 为什么 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 的 50%的宽度(或高度，对于 top )，因此分别为 250px 和 100px。但是在translate -50% 应用于 #element本身，所以它是 42px 的 50%。

我看到了它的好处，但我不明白这种(明显的)不连贯的原因。所以，

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

编辑:正如 SergeS 的回答中所述，我在 MDN 中看到所有属性根据定义都有自己对 <percentage> 的引用值(value)观。

在transform ,

Percentages – refer to the size of bounding box.

在top ,

Percentages – refer to the height of the containing block.

在margin ,

Percentages – refer to the width of the containing block.

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

Answer 1

1. • Translate = 获取当前元素并根据定义进行翻译。所以它考虑了当前的元素
   • left, top, ... - 和其他 position 属性 - 它们定义元素在父元素中的定位方式 - 因此，它们计算偏移父元素的位置(相对的父元素，最近的相对/absolute/绝对的固定元素)
   • padding、margin、... - 和其他 box 模型 属性 - 它们定义元素在父元素内的大小 - 所以它们再次与父容器相关

2. 没有