max-height: calc(( 100vh - 80px ) , 560px) 有什么作用？ [复制]

Question

我想知道max-height: calc(( 100vh - 80px) , 560px) 实际做了什么以及为什么我们必须为- 添加空间以使其工作

我试过如果- 没有空格，它就不起作用

我发现它是用 css 编写的，用于定义身高，例如

body{
 max-height: calc(( 100vh - 80px) , 560px);
}

Answer 1

你的规则

body {
  max-height: calc((100vh - 80px), 560px);
}

就目前而言，是 无效的 CSS，因为 calc 参数中不允许使用逗号分隔两个或多个值（无效数字错误）。

关于您的其他问题，运算符周围的空间对于区分有符号数/表达式和减法运算是必要的：

• + 和 - 运算符必须用空格包围。例如，
  calc(50% -8px) 将被解析为一个百分比，后跟一个负长度——一个无效的表达式——而calc(50% - 8px) 是一个百分比，后跟一个减法运算符和一个长度。同样，calc(8px + -50%) 被视为一个长度，后跟一个加法运算符和一个负百分比。

• * 和 / 运算符不需要空格，但允许并建议添加空格以保持一致性。

https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Syntax