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 中国語 Web サイトの他の関連記事を参照してください。