ホームページ >ウェブフロントエンド >CSSチュートリアル >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()の使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。