CSS3のcalc()メソッドの使い方

今回はCSS3のcalc()メソッドの使い方を紹介します。 CSS3の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 すべての選択のヒント: 最初にコードの一部を変更してから実行を押すことができます]

使用説明

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

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

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

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

サポート性

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

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

再描画とリフローの使用方法

CSS 設定を使用してユーザーパスワードを記録する方法

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