css 计算无效 属性 值
css calc invalid property value
谁能告诉我为什么这个 CSS 计算函数不起作用？当我检查 Chrome 上的元素时，它显示 'Invalid property value'。
width: calc((100vw - 14px * 2) / (270px + 11px * 2));
不能像 px 这样的单位除法，只能 numbers.
正如 Stephen Thomas 所回答的那样，您不能按单位划分。要解决这个问题，只需将数字除以数字，然后通过将结果乘以您感兴趣的单位的 1 个单位来指定测量单位。在您的嵌套场景中，您需要弄清楚您使用的测量单位是在最后，这样你就可以划分数字，然后将结果分配给 px 或 vw 测量单位。
使用 calc() 时，您不能除以像素，您只能除以无单位的数字。此外，您除以的数字必须具有特定单位，如 px、em、vh、vw。
例如，如果您需要设置元素的宽度，您应该使用：
width: (100px / 2); //this equals to 50px
一个重要的注意事项是确保在运算符号 之间放置空格。此 calc() article 提供了有关该功能的进一步详细说明。
对于未来的 google 员工：
DevTools 中无用的 "invalid property value" 消息可能只是意味着您需要在 + - / * 运算符周围添加白色 space。
不正确（无效 属性 值）：
width:calc(100vh-60px) <== no spaces around minus sign
正确：
width:calc(100vh - 60px) <== white space around the minus sign
上面的 OP 问题没有这个问题，但是在谷歌搜索这个错误消息的答案时，这是我找到的第一个资源，所以它应该有一个专门针对这个常见错误的答案。
参考文献：
CSS3 calc() not working in latest chrome
https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/
我刚刚遇到这个错误，因为一个 SCSS 变量被设置为零：
错误：
$card-border-width: 0;
这最终引发了 Chrome 的消息 Invalid 属性 value 作为对 CSS 结果 border-radius: 0 0 calc(0.25rem - 0) calc(0.25rem - 0) 的回答。 =14=]
右：
$card-border-width: 0rem;
(给出 border-radius: 0 0 calc(0.25rem - 0rem) calc(0.25rem - 0rem))
正如@cssyphys 上面提到的，你的减号周围必须有空格。但是，如果您使用的是 ASP.NET MVC 的 bundler/minifier，您会发现它删除了空格，因此您会收到注意到的错误。
如果您使用的是普通 CSS3，则可以在 CSS 中使用以下表达式并且不会缩小：
width: calc((100%) - 50px);
但是，如果您使用的是 LESS（也许还有其他 CSS 预处理器？），预处理器将“优化”您的表达式并撕掉您的内部括号，再次导致 ASP.NET 将搞砸了。要解决这个问题，请使用 LESS 的“不处理”波浪号表达式：
width: calc(~"(100%) - 50px");
我不得不回去更改一堆 calc() 语句，但为了取回我的 ASP.NET 缩小版，这是值得的。
谁能告诉我为什么这个 CSS 计算函数不起作用？当我检查 Chrome 上的元素时，它显示 'Invalid property value'。
width: calc((100vw - 14px * 2) / (270px + 11px * 2));
不能像 px 这样的单位除法，只能 numbers.
正如 Stephen Thomas 所回答的那样，您不能按单位划分。要解决这个问题，只需将数字除以数字，然后通过将结果乘以您感兴趣的单位的 1 个单位来指定测量单位。在您的嵌套场景中，您需要弄清楚您使用的测量单位是在最后，这样你就可以划分数字，然后将结果分配给 px 或 vw 测量单位。
使用 calc() 时，您不能除以像素，您只能除以无单位的数字。此外，您除以的数字必须具有特定单位，如 px、em、vh、vw。
例如，如果您需要设置元素的宽度，您应该使用：
width: (100px / 2); //this equals to 50px
一个重要的注意事项是确保在运算符号 之间放置空格。此 calc() article 提供了有关该功能的进一步详细说明。
对于未来的 google 员工：
DevTools 中无用的 "invalid property value" 消息可能只是意味着您需要在 + - / * 运算符周围添加白色 space。
不正确（无效 属性 值）：
width:calc(100vh-60px) <== no spaces around minus sign
正确：
width:calc(100vh - 60px) <== white space around the minus sign
上面的 OP 问题没有这个问题，但是在谷歌搜索这个错误消息的答案时，这是我找到的第一个资源，所以它应该有一个专门针对这个常见错误的答案。
参考文献：
CSS3 calc() not working in latest chrome
https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/
我刚刚遇到这个错误，因为一个 SCSS 变量被设置为零：
错误：
$card-border-width: 0;
这最终引发了 Chrome 的消息 Invalid 属性 value 作为对 CSS 结果 border-radius: 0 0 calc(0.25rem - 0) calc(0.25rem - 0) 的回答。 =14=]
右：
$card-border-width: 0rem;
(给出 border-radius: 0 0 calc(0.25rem - 0rem) calc(0.25rem - 0rem))
正如@cssyphys 上面提到的，你的减号周围必须有空格。但是，如果您使用的是 ASP.NET MVC 的 bundler/minifier，您会发现它删除了空格，因此您会收到注意到的错误。
如果您使用的是普通 CSS3，则可以在 CSS 中使用以下表达式并且不会缩小：
width: calc((100%) - 50px);
但是，如果您使用的是 LESS（也许还有其他 CSS 预处理器？），预处理器将“优化”您的表达式并撕掉您的内部括号，再次导致 ASP.NET 将搞砸了。要解决这个问题，请使用 LESS 的“不处理”波浪号表达式：
width: calc(~"(100%) - 50px");
我不得不回去更改一堆 calc() 语句，但为了取回我的 ASP.NET 缩小版，这是值得的。