css - css calc 无效的属性值

Question

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

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

score 176 · Accepted Answer

对于未来的谷歌人：

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

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

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

正确的：

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

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

参考：

score 20 · Accepted Answer

20

你不能除以单位px，只有数字。

于 2015-11-25T20:41:59.573 回答

score 5 · Accepted Answer

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

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

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

一个重要的注意事项是确保在操作员标志之间放置空格。这篇calc() 文章提供了有关该函数的进一步详细说明。

score 3 · Accepted Answer

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

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

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

但是，如果您使用 LESS（可能还有其他 CSS 预处理器？），预处理器将“优化”您的表达式并撕掉您的内部括号，再次导致 ASP.NET 会搞砸。为了解决这个问题，使用 LESS 的“不处理”波浪号表达式：

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

我不得不返回并更改一堆 calc() 语句，但为了找回我的 ASP.NET 缩小版非常值得。

score 2 · Accepted Answer

正如斯蒂芬托马斯所回答的那样，您不能按单位划分。为了解决这个问题，只需将数字除以数字，然后通过将结果乘以您感兴趣的单位的 1 个单位来分配度量单位。在嵌套场景中，您需要弄清楚您的度量单位最后，您可以将数字相除，然后将结果分配给 px 或 vw 测量单位。

score 0 · Accepted Answer

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

错误的：

$card-border-width: 0;

这最终引发了 Chrome 的消息Invalid property value in answer to the CSS result 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)）

6 回答 6