為什麼我的 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中文網其他相關文章！