Css 为什么'；t min（）（或max（））与无单位0一起工作？

我到处寻找这个问题的答案，但找不到任何有用的信息。我试图将CSS中元素的

top

属性设置为

max（0120vh-271px）

。我尝试了几种不同的方法：

• top:max（0120vh-271px）

• top:max（0，（120vh-271px））

• 顶部：最大值（0，计算值（120vh-271px））

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

实际上，我使用CSS变量来表示数字。所以120vh实际上是

var（--height）

或者类似的东西。当我使用CSS变量时，该行什么都不做。它没有应用样式，我也没有收到任何警告。我做错了什么

---

我使用的是最新版本的Chrome（我相信是83），所以这应该得到支持。

您需要在

0

中添加一个单位，否则浏览器在处理无单位值和有单位值之间的比较时会产生混乱：

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

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

min（）

或

max（）

函数包含一个或多个逗号分隔的计算，分别表示其中最小（最负）或最大（最正）

然后进行计算：

calc（）函数包含一个计算，它是一个值序列，中间点缀着运算符，可能通过括号分组（与

语法匹配）

因此，基本上

calc（）

的所有规则都适用于

min（）

/

max（）

，并且

0

是无效的

注意：由于

s总是被解释为

s或

s，因此

calc（）

中不支持“无单位0”

s。即宽度：

calc（0+5px）无效，即使两个宽度均为：0；宽度：5px；是有效的

相关的：

您可能会感到惊讶，但是使用
top:0
是有效的，而
top:calc（0）
不是。要使后者有效，它需要是
top:calc（0px）
。
min（）
/
max（）

值得注意的是，同样的情况也适用于
clamp（）
，因为它与
max（MIN，MIN（VAL，max））
@temaniaf相等，如果CSS变量不是问题的一部分，据我所知，是因为原始帖子中的图像。它也不适用于简单的数字/单位。变量定义为图片中的单位：
max（0[无单位]、120vh[视口高度]-271px[以像素为单位]
。还有，为什么CSS的最后一行更好？Max应该直接支持计算，而不需要计算。