css 计算属性值无效

Question

有人可以告诉我为什么这个 CSS 计算功能不起作用吗？当我在 Chrome 上检查元素时，它显示“属性值无效”。

width: calc((100vw - 14px * 2) / (270px + 11px * 2));

Answer 1

对于未来的谷歌用户：

DevTools 中无用的“无效属性值”消息可能只是意味着您需要在 + - / * 运算符周围留有空格。

不正确（无效的属性值）：

width:calc(100vh-60px)  <== no spaces around minus sign

正确：

width:calc(100vh - 60px) <== white space around the minus sign

注意下面的评论，其中 user2682863 观察到他的 CSS 缩小器正在删除这个必要的空格。

上面OP的问题没有这个问题，但是在谷歌搜索这个错误消息的答案时，这是我找到的第一个资源，所以它应该有一个专门针对这个常见错误的答案。

参考资料：

Answer 2

27
投票

您不能除以

px

之类的单位，只能除以数字。

Answer 3

正如@cssyphys 上面指出的，减号周围必须有空格。但是，如果您使用 ASP.NET MVC 的捆绑器/压缩器，您会发现它删除了空格，因此您会收到指出的错误。

如果您使用纯CSS3，则可以在CSS中使用以下表达式并且不会被缩小：

width: calc((100%) - 50px);

但是，如果您使用 LESS（也许还使用其他 CSS 预处理器？），预处理器将“优化”您的表达式并删除内部括号，再次导致 ASP.NET 出现问题。为了解决这个问题，请使用 LESS 的“不处理”波形符表达式：

width: calc(~"(100%) - 50px");

我不得不返回并更改一堆 calc() 语句，但为了恢复我的 ASP.NET 压缩是值得的。

Answer 4

使用 calc() 时，不能除以像素，只能除以无单位数字。此外，您要除的数字必须具有特定的单位，例如 px、em、vh、vw。

例如，如果您需要设置元素的宽度，您应该使用：

width: (100px / 2); //this equals to 50px

一个重要的注意事项是确保在操作符之间留有空格。这篇 calc() 文章提供了有关该函数的更详细的解释。

Answer 5

正如斯蒂芬·托马斯（Stephen Thomas）回答的那样，你不能除以单位。要解决此问题，只需将数字除以数字，然后通过将结果乘以您感兴趣的单位的 1 个单位来分配测量单位。在嵌套场景中，您需要弄清楚您需要使用的测量单位最后，以便您可以将数字相除，然后将结果分配给 px 或 vw 测量单位。

Answer 6

我刚刚遇到此错误，因为一个 SCSS 变量被设置为零：

错误：

$card-border-width: 0;

这最终引发了 Chrome 的消息 Invalid property value 来回应 CSS 结果

border-radius: 0 0 calc(0.25rem - 0) calc(0.25rem - 0)

。

右：

$card-border-width: 0rem;

（给予

border-radius: 0 0 calc(0.25rem - 0rem) calc(0.25rem - 0rem)

）