css - 为什么 min() (或 max())不能与无单位 0 一起使用？

Question

我四处寻找答案，但找不到任何有用的信息。我正在尝试将 CSS 中元素的 top 属性设置为 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)，所以应该支持它。

Answer 1

您需要向 0 添加一个单位，否则浏览器会混淆无单位值和带单位值之间的比较:

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

要理解这一点，您需要遵循 the specification :

The min() or max() functions contain one or more comma-separated calculations, and represent the smallest (most negative) or largest (most positive) of them, respectively.

然后进行计算:

A calc() function contains a single calculation which is a sequence of values interspersed with operators, and possibly grouped by parentheses (matching the <calc-sum> grammar),

所以基本上 calc()的所有规则都适用于 min()/ max()并且 0是无效的

Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid. ^ref

相关: Why doesn't css-calc() work when using 0 inside the equation?
您可能会感到惊讶，但使用 top:0 有效而 top:calc(0) 无效。为了使后者有效，它需要是 top:calc(0px) 。 min()/ max() 的逻辑相同
值得一提的是，这同样适用于 clamp()，因为它等价于 max(MIN, min(VAL, MAX))