html - 如何在 CSS 中为 calc() 值设置最小值

Question

我想知道 CSS 中是否有一种方法可以为 calc() 生成的内容设置最小值。例如，目前我有:

left: calc(50% - 500px);

但是，我不希望这个值永远是负数，所以一旦这个值变为负数，它就应该始终为 0。是否有某种我找不到的功能？提前致谢。

Answer 1

作为纯 CSS 解决方案，您不能在 calc() 中“设置最小值”因为该函数只接受 1 个参数 [或操作数组作为 1 个参数] 并使用 <length> 执行计算, <frequency> , <angle> , <time> , <percentage> , <number> , <integer> dimension values , 至少 as it stands now

由于负数是可能的，并且假设您想在两个数字之间获得最小值/最大值，根据您的示例，在“默认值”和计算结果之间，您不能使用简单的初等算术来找到最大值。

跳出框框思考它看起来像这样 max = (a+b+|a-b|)/2 :

div {
    --a: calc(50% - 500px);  
    --b: 0px;
  --apb: calc(var(--a) + var(--b)); 
  --amb: calc(abs(var(--a) - var(--b))); /* this won't work because we need an absolute value here, which you can not get with simple arithmetic */
  --max: calc( (var(--apb) + var(--amb)) / 2); 

  left: var(--max);
}

在某些情况下，CSS 值具有无效范围，就像 RGB 值一样。 RGB 值不能小于 0 这样 calc()即使计算结果为负数，结果设置为 RGB 值也将被视为有效，但不会应用，因为 RGB 具有不同的范围。但是，这对于维度来说是不一样的，除非您在计算中的某处明确抛出被零除的错误以强制产生无效结果，否则允许使用负数。