为什么在CSS中一个简单的操作需要使用calc函数?

Question

在MDN web docs calc示例中，我看到了width: calc(10px + 100px)的演示示例，但我可以简单地使用width: 110px。

所以不是calc(10px + 100px)复杂的代码为一个简单的操作?calc是如何真正帮助我的?

Answer 1

使用calc就像你说的，对于相同单位类型的两个值是无用的，除非它们通过变量使用，例如:

:root {
--some-width: 50px;
}
.some-element {
width: calc(var(--some-width) + 100px);
}

如果--some-width保持为50px，则计算为150px，然而，--some-width可以更改为其他任何值，使得calc在本例中有用-但在calc(10px + 100px)的示例中无用。

它们对于将相对单元(如em或%)与其他值(不相关的类型)进行组合很有用。

相对长度单位见https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units。

calc(10px + 100px)的例子正如你所说的正确，在没有任何好的推理的情况下引入了更多的处理，尽管不是大规模的。