html - px ,em ,% 如何在 css 的变换属性中测量？

Question

当我们在变换（平移）属性中使用 em,px,% 在 CSS 中沿 X、Y 方向移动元素时，这些单位是相对于什么来测量（解析）的？它如何决定在哪个方向上移动多少？

标签： htmlcsscss-transforms

Answer 1

你有两种情况：

1. 您正在使用相对或绝对长度值（px、em、ch等）。在这种情况下，当它们与 一起使用时没有什么特别的，如果它们与任何其他属性一起使用，它们将以相同的方式得到解决（您可以参考提供的链接以了解每个属性是如何解决的）。translate
2. 您正在使用百分比值。在这种情况下，值将相对于元素本身的维度得到解析。因此，使用translateX(X%)意味着在 X 轴上平移宽度的 X%，而在translateY()逻辑上会考虑高度。

更多细节：https ://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate