为什么 min()（或 max()）不能与无单位 0 一起使用？
Why doesn't min() (or max()) work with unitless 0?
我四处寻找这个问题的答案，但找不到任何有用的信息。我正在尝试将 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），所以应该支持它。
您需要向 0 添加一个单位，否则浏览器会混淆处理无单位值 (a <number>) 和带单位的值 (a <length>) 并且 top 属性 接受 <length> 而不是 <number>
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),
所以 min()/max() 的内容被视为 calc() 然后从 type checking
A math function can be many possible types, such as <length>, <number>, etc., depending on the calculations it contains, as defined below. It can be used anywhere a value of that type is allowed.
和
Note: Altho there are a few properties in which a bare <number> becomes a <length> at used-value time (specifically, line-height and tab-size), <number>s never become "length-like" in calc(). They always stay as <number>s.
您可能会感到惊讶，但使用 top:0 是有效的，而 top:calc(0) 则不是。要使后者有效，它需要 top:calc(0px)。 min()/max()
的逻辑相同
值得注意的是，这同样适用于 clamp()，因为它等同于 max(MIN, min(VAL, MAX))
相关：
我四处寻找这个问题的答案，但找不到任何有用的信息。我正在尝试将 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），所以应该支持它。
您需要向 0 添加一个单位，否则浏览器会混淆处理无单位值 (a <number>) 和带单位的值 (a <length>) 并且 top 属性 接受 <length> 而不是 <number>
top: max(0px, 120vh - 271px)
要理解这一点，您需要遵循the specification:
The
min()ormax()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),
所以 min()/max() 的内容被视为 calc() 然后从 type checking
A math function can be many possible types, such as
<length>,<number>, etc., depending on the calculations it contains, as defined below. It can be used anywhere a value of that type is allowed.
和
Note: Altho there are a few properties in which a bare
<number>becomes a<length>at used-value time (specifically, line-height and tab-size),<number>s never become "length-like" incalc(). They always stay as<number>s.
您可能会感到惊讶，但使用 top:0 是有效的，而 top:calc(0) 则不是。要使后者有效，它需要 top:calc(0px)。 min()/max()
值得注意的是，这同样适用于 clamp()，因为它等同于 max(MIN, min(VAL, MAX))
相关：