为什么我的 CSS `calc()` 函数不起作用？

为什么 CSS calc() 函数不起作用？

使用 CSS calc() 函数时可能会遇到问题，尤其是当尝试减去包含 px 单位的表达式。这可能是由一个常见的疏忽引起的：忘记在运算符之间包含空格。

修复符号：

要解决此问题，请确保有空格分隔calc() 表达式中的运算符。例如，不要使用 calc(100vw/4-(10px-4))，而是使用 calc(100vw/4 - (10px - 4))。

嵌套计算：

calc() 函数允许您在括号内嵌套计算，如下例所示：

<code class="css">.one {
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2)); /* Same as calc(20px + (40px * 2)) */
}</code>

管理动态计算：

在 SASS 中循环中，您可以使用以下方法动态替换 calc(100vw/x-(10px-x)) 中的 x：

<code class="sass">@for $i from 1 through 4 {
  .item-#{$i} {
    width: calc(100vw/#{$i} - (10px - #{$i}));
  }
}</code>

以上是为什么我的 CSS `calc()` 函数不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！