CSSのcalc（）関數(shù)により、數(shù)學(xué)操作をスタイルシートで直接実行できます。その基本的な構(gòu)文には、追加、減算、乗算、および分割の4つの操作が含まれ、sum-オペレーターを使用するときにスペースを追加する必要があります。主な用途には次のものが含まれます。1。ボックスモデル（內(nèi)側(cè)のマージンを差し引くなど）を変更せずに幅を調(diào)整します。 2。動(dòng)的に位置する要素（パーセンテージに基づいてセンタリングや位置の微調(diào)整など）。 3.計(jì)算のために異なるユニットを混ぜます（ビューポートユニットとピクセルの組み合わせなど）。さらに、calc（）はネストされた使用をサポートしますが、読みやすさを維持するために過(guò)剰な概念を避ける必要があります。ブラウザの互換性は優(yōu)れており、プレフィックスを追加する必要はありませんが、古いブラウザー（IE11など）を扱う際に潛在的な問(wèn)題に注意する必要があります。複雑な式にコメントを追加し、使用するときにマルチブラウザーテストを?qū)g行することをお?jiǎng)幛幛筏蓼埂?

CSSでcalc()を使用することは、スタイルシート內(nèi)で數(shù)學(xué)を行うための便利な方法です。さまざまなユニットを混ぜたり、幅、高さ、マージンなどを計(jì)算する必要がある場(chǎng)合に特に便利です。それがどのように機(jī)能するか、いつ使用したいかを分解させてください。

calc()の基本的な構(gòu)文

calc()関數(shù)を使用すると、CSS値で直接、追加、減算、乗算、および分割を基本的な數(shù)學(xué)操作を?qū)g行できます。構(gòu)文は次のようになります：

幅：calc（100％-20px）;

覚えておくべきことの1つは、常に空間を置くことです および-オペレーター。そうでなければ、それは機(jī)能しません。だからこれは正しい：

 Calc（100％-20px）

しかし、これはうまくいきません：

 Calc（100％-20px）

calc() - ピクセル、パーセンテージ、EMS、REM、ビューポートユニットなど內(nèi)に有効なCSS値を使用できます。この柔軟性により、レスポンシブレイアウトに非常に役立ちます。

calc()の一般的なユースケース

calc()本當(dāng)に輝く狀況がいくつかあります：

• パディングまたは境界で幅を調(diào)整します
  要素を100％幅にするだけでなく、パディングも持っている場(chǎng)合は、 box-sizing: border-box通常それを処理します。ただし、ボックスモデルを変更できない場(chǎng)合、 calc()は適切な代替手段です。

   。箱 {
    幅：calc（100％-20px）; / *左右のパディングを減算 */
    パディング：0 10px;
  }

• 要素を動(dòng)的に配置します
  何かを集中させたいが、別の値に基づいて調(diào)整することをお?jiǎng)幛幛筏蓼埂＠à校?/p>

   .tooltip {
    左：calc（50％-100px）;
  }

• ミキシングユニット
  これは最も強(qiáng)力な用途の1つです。ビューポート幅でフォントサイズをスケーリングするが、少し追加するとしましょう。

   font-size：calc（1VW 10px）;

これらの例は、レイアウト數(shù)學(xué)を処理するためだけにJavaScriptまたは追加のラッパー要素を避けるのに役立つcalc()どのように役立つかを示しています。

Nesting calc()関數(shù)

はい、 calc()機(jī)能を互いにnestすることもできます。毎日使用するものではありませんが、複雑な計(jì)算を扱うときに役立つことがあります。

貢獻(xiàn)した例があります：

幅：calc（（100％ / 3） -  calc（30px 1em））;

実際には、ネストは速く読みにくいので、本當(dāng)に必要な場(chǎng)合を除き、シンプルに保ちます。また、SASS以下のような最新のプリプロセッサは、ブラウザに當(dāng)たる前に、ネストされた數(shù)學(xué)が管理しやすくなる可能性があります。

ブラウザのサポートとヒント

calc()のブラウザサポートは最近堅(jiān)実です - すべての主要なブラウザは問(wèn)題なくそれをサポートしています。接頭辭を心配する必要はもうありません。

いくつかの簡(jiǎn)単なヒント：

• 周りのスペースを忘れないでください そして- 。
• 必要に応じて複雑なcalc()式內(nèi)でコメントを使用しますが、CSSは內(nèi)部のコメントを許可していません。
• いくつかの癖が存在する古いバージョン（IE11など）をターゲットにする場(chǎng)合、複數(shù)のブラウザでテストします。

レスポンシブサイトを構(gòu)築したり、間隔やサイジングで動(dòng)的なことをしたりする場(chǎng)合、 calc() CSSツールキットを維持するための優(yōu)れたツールです。

これが、CSSでcalc()使用することの基本です。構(gòu)文に慣れたら複雑ではありませんが、実際のレイアウトでは非常に役立ちます。

以上がCSS calc（）関數(shù)チュートリアルの使用方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。