CSS3のcalc()メソッドについて

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

次のコードは CSS 3 の 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 すべて選択のヒント: 最初にコードの一部を変更してから実行を押すことができます]

使用説明

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

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

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

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

サポート性

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

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3での@keyframesアニメーションの実装

CSSバナー画像のレスポンシブ中央表示方法について

CSS table-layout属性の使用

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