放置元素时使用`calc（）`vs`transform`

Question

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

例如......

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

产生与以下相同的结果：

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

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

＆＃34; calc()仅使用一行，而transform则需要两行＆＃34;

足够公平。但是（在我的情况下）我已经使用transform来调整另一个轴（因为我不知道知道初始大小），所以我可以很容易地结合起来translateY()和translateX()实际减少行数。

＆＃34;因为浏览器支持＆＃34;

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

是否存在标准或性能情况，表明一种解决方案比另一种更好？

Answer 1

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

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

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

Answer 2

变换可能受其他变换的影响，这可能会导致渲染不同。例如，如果您使用perspective转换，translateY()将在该视角内发生。因此，将应用透视，然后根据您设置的消失点转换元素。

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

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