CSS3でのcalc()の使い方の詳しい説明

この記事は主に CSS 3 の calc() メソッドを詳しく紹介しています。非常に優れており、必要な方は参考にしていただければ幸いです。

次のコードは、CSS3 の calc() メソッドを紹介します。具体的な内容は次のとおりです:

<p style="width:100px; height:50px; background:red;">
  <p style="width:100%; height:20px; margin:5px; background:green;"></p>
</p>

[Ctrl+A すべての選択のヒント: 最初にコードの一部を変更してから、[実行] を押すことができます。

上記の通り コードのプレビューでは、標準の CSS では幅にマージンが含まれていないため、赤いボックスを超えていることがわかります (古い IE の幅にはマージンが含まれています)。

上記の効果を実現するために、通常は真ん中に別の p レイヤーを配置します (width:100% を削除すればいいのではないかという人もいます。落ち着いてください。例を挙げています。実際、場合、width:100 % は削除できません。)

もっと便利なものはありますか?代わりに calc() を使用してください。

<p style="width:100px; height:50px; background:red;">
  <p style="width:calc(100% - 10px); height:20px; margin:5px; background:green;"></p>
</p>

[Ctrl+A すべて選択のヒント: 最初にコードの一部を変更してから実行を押すことができます]

使用説明

• サポート: +、-、*、/、混合サポートuse

• サポート: %、px、em、rem など

• +, - 前後にスペースが必要です。例: calc(100%-10px) は正しくないため、次のように変更する必要があります。 calc(100% - 10px)

• *, / 前後にスペースは必要ありませんが、入れることをお勧めします。
  

サポート性

すべての主要なデスクトップブラウザがサポートしています。モバイルブラウザではほとんど対応していないと言われています。

関連する推奨事項:

CSS3 の新しい属性 calc() の詳細な紹介

CSS3 の calc() のレスポンシブ モード レイアウト メソッドの紹介

CSS3 の calc() 属性を使用して、サイズを計算で表現する数値の説明

以上がCSS3でのcalc()の使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。