为啥 min() (或 max()) 不能与无单位 0 一起使用？

Posted 2023-03-06

【中文标题】为啥 min() (或 max()) 不能与无单位 0 一起使用？

【英文标题】：Why doesn't min() (or max()) work with unitless 0?为什么 min() (或 max()) 不能与无单位 0 一起使用？

【发布时间】：2020-10-12 16:51:38

【问题描述】：

我已经四处寻找答案，但找不到任何有用的信息。我正在尝试将 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），所以应该支持。

【问题讨论】：

@TemaniAfif CSS 变量不是问题的一部分，据我所知，因为原始帖子中的图像。它也不适用于简单的数字/单位。变量定义为图中的单位：max(0 [no unit], 120vh [viewport height] - 271px [this is in pixels])。还有，为什么最后一行 CSS 更好？ Max应该是直接支持计算而不需要计算的。

【参考方案1】：

您需要在0 中添加一个单位，否则浏览器在处理无单位值（<number>）与单位值（<length>）和top 属性之间的比较时会感到困惑接受<length> 而不是<number>

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

要理解这一点，你需要关注the specification：

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

然后进行计算：

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

所以min()/max() 的内容被视为calc() 的内容，然后来自type checking

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

和

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

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

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

相关：Why doesn't css-calc() work when using 0 inside the equation?

【讨论】：

如果无单位是实际值怎么办？我想用 1.5 作为我的值。这与 1.5em 不同（em 使其相对于父字体大小，没有单位的 1.5 表示当前字体大小的 1.5 倍）。

@KerryJohnson 这取决于属性。 1.5 仅在应用于行高时表示“1.5 字体大小”。 1.5 单独没有意义，所以一切都取决于你的情况

感谢您的回复。我正在尝试将其应用于行高。如果 min()、max() 和 clamp() 会考虑到属性上下文（即 min() 应用于 line-height，因此使用无单位 line-height）会很好，但我猜这些函数存在于一个单独的层而不考虑这些细微差别。我想知道是否有关于此的错误报告，或者是否是这样设计的。 “1.5 the font-size”是行高的有效测量形式，所以我认为这是一个错误。

@KerryJohnson 它确实考虑了该属性。在答案中，我并不是说不允许不统一。我是说无单位值和单位值之间的比较是不可能的。你可以做min(1.2,0)，它工作正常（你会得到0）。您可以考虑通过添加代码和上下文来提出问题以获得准确的答案。 min()/max() 比你想象的更令人惊讶。

我试过 min(1.5, 1.25rem) 并在检查器中将其删除（您确实说过“我是说无法进行无单位值和单位值之间的比较”）。如果它们都解析为计算的 px 值，为什么这不适用于行高？它是规范灰色区域吗？