为什么min()(或max())不能与无单位0一起使用? [英] Why doesn't min() (or max()) work with unitless 0?

问题描述

我一直在寻找答案，但是找不到任何有用的信息.我正在尝试将CS​​S中元素的 top 属性设置为 max(0，120vh-271px).我已经尝试了几种方法:

I've searched around for an answer to this, but couldn't find any useful information. I'm trying to set the top property of an element in CSS to max(0, 120vh - 271px). I've tried several variations of this:

• 顶部:max(0，120vh-271px);
• top:max(0，(120vh-271px));
• 顶部:max(0，calc(120vh-271px));

我的语法有问题吗?Chrome不断告诉我这是无效的属性错误.

Is there something wrong with my syntax? I keep getting Chrome telling me that this is an invalid property error.

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

In practice, I'm actually using CSS variables for the numbers. so 120vh is actually var(--height) or something like that. When I use CSS variables, the line just doesn't do anything. It doesn't apply the style, and I don't get any warnings. What am I doing wrong here?

我使用的是最新版本的Chrome(我相信是83)，因此应该支持.

I'm using the newest version of Chrome (83 I believe), so this should be supported.

推荐答案

您需要在 0 中添加一个单位，否则浏览器无法处理无单位值与带有单位:

You need to add a unit to 0 otherwise it's confusing for the browser to handle the comparaison between a uniteless value and a value with unit:

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

要了解这一点，您需要遵循规范:

To understand this, you need to follow the specification:

min()或 max()函数包含一个或多个逗号分隔的计算，并代表最小的(最负数)或最大的(最正的).

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.

然后进行计算:

calc()函数包含一个 calculation ，该值是一系列由运算符散布的值，并可能按括号分组(与< calc-sum> 匹配)语法)

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 无效

So basically all the rules of calc() apply to min()/max() and 0 is invalid

注意:由于< token-token> s始终被解释为< number> s或< integer> s，无单位0" calc()不支持< length> .也就是说，宽度: calc(0 + 5px); 无效，即使两个宽度:0;宽度:5px；是有效的. ^参考

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

相关:为什么在方程式中使用0时css-calc()不起作用?

您可能会感到惊讶，但是使用 top:0 是有效的，而 top:calc(0)无效.为了使后者有效，它必须为 top:calc(0px). min()/ max()

You may get surprised but using top:0 is valid while top:calc(0) is not. To make the latter valid it needs to be top:calc(0px). Same logic for min()/max()

需要注意的是， clamp()也是如此，因为它等效于 max(MIN，min(min(VAL，MAX))

Worth to note that the same also apply to clamp() since it's equiavalent to max(MIN, min(VAL, MAX))

这篇关于为什么min()(或max())不能与无单位0一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！