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

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

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

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

我正在使用最新版本的 Chrome（我相信是 83），所以应该支持它。

标签： csscss-calc

您需要添加一个单位，0否则浏览器在处理无单位值 (a <number>) 与单位 (a <length>) 值之间的比较时会感到困惑，并且top属性接受 a <length>not a<number>

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

要理解这一点，您需要遵循规范：

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

然后进行计算：

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

因此min()/的内容max()被视为类型检查calc()中的then之一

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

和

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

您可能会感到惊讶，但使用top:0是有效的，而top:calc(0)不是。为了使后者有效，它需要是top:calc(0px). 相同的逻辑min()/max()

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