この記事では主に 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のcalc()メソッドについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。