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 サイトをご覧ください。

関連記事