ホームページ > ウェブフロントエンド > CSSチュートリアル > calc() 関数が機能しないのはなぜですか?

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

Patricia Arquette
リリース: 2024-11-02 10:32:30
オリジナル
448 人が閲覧しました

Why Isn't My calc() Function Working?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート