为什么 min() （或 max()）不能处理无单位的 0？

我四处寻找这个问题的答案，但找不到任何有用的信息。我正在尝试设置topCSS 中元素的属性max(0, 120vh - 271px)。我尝试过几种变体：

• top: max(0, 120vh - 271px);
• top: max(0, (120vh - 271px));
• top: max(0, calc(120vh - 271px));

我的语法有问题吗？ Chrome 不断告诉我这是一个无效的属性错误。

在实践中，我实际上使用 CSS 变量来表示数字。所以120vh实际上是var(--height)或类似的东西。当我使用 CSS 变量时，该行不执行任何操作。它不应用该样式，并且我没有收到任何警告。我在这里做错了什么？

我使用的是最新版本的 Chrome（我认为是 83），所以应该支持它。

您需要添加一个单位0否则浏览器在处理无单位值（a<number>）和一个单位值（a<length>）和top财产接受<length> not a <number>

top: max(0px, 120vh - 271px)

要理解这一点，您需要遵循规格 https://drafts.csswg.org/css-values-4/#comp-func:

The min() or max()函数包含一个或多个以逗号分隔的函数计算， 和 分别表示它们中的最小（最负）或最大（最正）。

然后进行计算：

A calc()函数包含一个计算这是一个散布有运算符的值序列，并且可能由括号分组（匹配<calc-sum>语法），

所以内容min()/max()被视为像其中之一calc()然后从类型检查 https://drafts.csswg.org/css-values-4/#calc-type-checking

数学函数可以有多种可能的类型，例如<length>, <number>等，具体取决于它包含的计算，如下定义。它可以在任何允许该类型值的地方使用。

and

注意：尽管有一些属性是裸露的<number>成为一个<length>在使用值时间（特别是行高和制表符大小），<number>s 永远不会变得“像长度一样”calc()。他们始终保持原样<number>s.

你可能会感到惊讶，但使用top:0有效，同时top:min(0) or top:max(0)不是。为了使它们有效，您需要添加单位。

但你可以使用opacity: min(0)例如，因为不透明度接受数字作为参数。

值得注意的是，这同样适用于clamp()因为它相当于max(MIN, min(VAL, MAX))

有关的：为什么在等式中使用 0 时 css-calc() 不起作用？ https://stackoverflow.com/q/55406001/8620333