calc() 関数が機能しないのはなぜですか?

Calc() 関数の問題: 機能しない理由

calc(100vw/4) 関数は期待どおりに機能していますが、他の関数は機能しません重要な要素のためではありません: spaces.

CSS calc() 関数では、演算子間にスペースが必要です。一般的なエラーには、これらのスペースの省略による無効な式が含まれます。

たとえば、式 calc(100vw/4-(10-4)) は、「-」と括弧の間にスペースがないため無効です。代わりに、次のようにする必要があります: calc(100vw/4 - (10 - 4))。

ネストされた Calc() 関数

calc() 関数は次のようにネストできます。必要に応じて何度でも使用できますが、かっこと同じように機能します。例:

<code class="css">calc(100vw/4 - calc(10px - 4px))</code>

は次と同等です:

<code class="css">calc(100vw/4 - (10px - 4px))</code>

例

ネストされた calc() 関数の例を次に示します。 🎜>

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

この例では、margin-top プロパティはネストされた calc() 関数を使用して、40px を 2 で乗算した結果に 20px を加算します。

以上がcalc() 関数が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。