放置元素时使用 `calc()` 与 `transform`

Question

当元素的大小已知时，是否有理由在放置元素时使用 calc() 而不是 transform 属性，反之亦然？

例如...

.element {
  bottom: 100%;
  transform: translateY(-9px);
}

产生与以下相同的结果：

.element {
  bottom: calc(100% + 9px);
}

如果元素的大小未知，我会看到使用 transform 的优势。但是，如果大小已知（如上所述），我可以轻松地使用 calc() 进行调整。

"calc() 只使用一行，而 transform 需要两行"

很公平。但是（就我而言）我已经在使用 transform 沿另一个轴进行调整（因为我 不知道 初始大小），因此我可以轻松地将translateY() 和 translateX() 实际上减少行数。

"Because browser support"

假设我们在两种解决方案中都有完整的浏览器支持。

是否存在表明一种解决方案优于另一种解决方案的标准或性能情况？

Answer 1

变换可能会受到其他变换的影响，这可能会导致渲染出现差异。例如，如果您使用 perspective 变换，则 translateY() 将发生在该透视图内。因此，将应用透视，然后元素将根据您设置的消失点进行变换。

如果您使用的是 calc()，则无论设置的视角如何，元素都会定位在页面上。这可能是一个细微的差别，但它就在那里。

但是，如果您不使用像 perspective 这样的 3D 变换，或者如果 translate() 是您使用的唯一变换，我认为这没有区别。

Answer 2

transform 是一个怪物，能够做比简单翻译更强大的事情。

因此，它有一些附带效果，例如为其后代建立一个包含块，即使它们处于固定位置！

因此，根据经验，当您只需要简单的翻译时，我建议避免 transform。我更喜欢calc()、边距等

Using `calc()` vs `transform` when placing elements