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

众所周知，CSS翻译中的百分比值与翻译元素本身的大小有关，而（AFAIK）应用于任何其他属性时，它们与父元素的大小有关。例如，在

flexbox

或

grid

出现在浏览器中之前，它主要用于垂直居中元素

.wrapper{
宽度：500px；
高度：200px；
背景颜色：浅灰色；
}
#元素{
宽度：42px；
高度：42px；
背景色：红色；
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

• Translate=获取当前元素并按定义进行转换。所以它考虑了当前元素
• 左，上，…-和其他位置属性-它们定义元素在父元素中的定位方式-因此，它们计算偏移父元素的位置（父元素表示相对，最近的相对/绝对/固定元素表示绝对）
• 填充、边距、…-和Othert box模型属性-它们定义了元素在父元素中的大小-因此它们同样与父容器相关

没有

---

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

在第一种情况下，当您说

left:50%

和

top:50%

时，它只意味着通过测量相对于第一个相对定位的父对象（默认主体）的偏移量，将元素保持在距顶部和左侧50%的偏移量

---

在第二种情况下，当您说translate时，表示您正在使用给定的值通过translate方法变换元素。

translate属性对元素有效，因为它不涉及浏览器上的像素重绘，只是从一个位置移动到另一个位置。我想其他属性包括所有变换属性。谢谢@ShubhamAgrawal。你知道这个重绘像素理论的来源吗？你可以参考[谢谢你的回答。我必须说我真的不明白。我在

#element

的多个属性中使用了50%，例如，在x轴中，

left

50%取值250px，但在

translate

in的x坐标中取值21px，因此显然引用不一样。此外，我看不出第二种情况对t的影响元素的大小…谢谢你的回答。

translate

根据定义引用元素本身似乎是解释这种行为的一个很好的理由。我想知道为什么。。。