问为什么calc()函数不能工作？

EN

您需要在操作符之间添加空间，忘记它们是一个常见的错误。我们也可以使用任意数量的calc嵌套操作，但它们等同于简单的括号。

来自文档

Note：+和-运算符必须被空格包围。例如，calc(50% -8px)将被解析为一个百分比，后面跟着一个负长度--一个无效的表达式--而calc(50% - 8px)是一个百分比，后面是一个减法运算符和一个长度。同样，calc(8px + -50%)被看作是一个长度，后面是一个加法运算符和一个负百分比。 *和/运算符不需要空格，但是为了一致性而添加它是允许的，也是推荐的。 Note：允许嵌套calc()函数，在这种情况下，内部函数被视为简单括号。

​

.one {
  background: red;
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2)); /*Same as calc(20px + (40px * 2))*/
  height: calc(100px - 10px);
  padding: calc(5% + 10px) calc(5% - 5px);
}

<div class="one">

</div>

​

​

​

处理max()、min()和clamp()时的逻辑相同，因为它们接受与calc()相同的参数

相关：为什么min() (或max())不适用于无单位的0？