Question

众所周知，CSS翻译中的百分比值与翻译元素本身的大小有关，而（AFAIK）应用于任何其他属性，它们与父级的大小相关。这主要用于垂直居中元素，例如，在我们的浏览器中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>

在此示例中，我们看到应用于left和top属性的50％如何引用.wrapper宽度的50％（或top的高度），所以它分别是250px和100px。但在translate中，-50％应用于#element本身，因此它是42px的50％。

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

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

编辑：正如SergeS的回答所述，我在MDN中看到所有属性按照定义都有自己对<percentage>值的引用。

在transform，

百分比 - 指的是边界框的大小。

在top，

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

在margin，

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

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

Answer 1

- 翻译=获取当前元素并按定义翻译。所以它需要考虑当前的元素
- left，top，... - 和其他 position 属性 - 它们定义元素在父元素中的定位方式 - 因此，它们计算位置以偏移父元素（父元素为相对的，最近的相对元素） / absolute / fixed element for absolute）
- 填充，边距，... - 以及其他框模型属性 - 它们定义元素在父元素内的大小 - 所以它们又与父容器相关
没有

Answer 2

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

在第一种情况下，当您说<div>{{ NODE_ENV }}</div> data() { return { NODE_ENV: process.env.NODE_ENV } }和SELECT evaluator,employee_id, AVG(score) FROM tbl_evaluation GROUP BY evaluator HAVING employee_id= '0001' and evaluator='Peer';时，它只是意味着通过测量第一个相对定位父级的偏移量来保持元素与顶部和左侧偏移50％（默认值）体）。

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

为什么CSS翻译中的百分比值与元素本身相关？

2 个答案: