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 < / p>

由于负数是可能的，并且说您想获得两个数字之间的最小值/最大值（例如，在默认值和计算结果之间），因此您不能使用简单的基本算术来找到最大值。

跳出框框，看起来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的范围不同，因此不适用。但是，对于尺寸而言，这是不一样的，除非您在计算中的某处显式地将零错误除以强制无效结果，否则允许使用负数。

Answer 2

您可以使用：

left: max(0, 50% - 500px);

了解更多详情check this

更新：

如果您确实需要使用 calc() 来计算最大值，我想没有可用的直接过程。

如何在CSS中为calc（）值设置最小值

2 个答案: