CSS3 のボックス サイズ設定 (コンテンツ ボックスとボーダー ボックス) の詳細な説明

CSS3 のボックス サイズ設定 (content-box と border-box)

CSS3 の box-sizing プロパティを使用すると、ボックス モデルを特定の方法で指定できます。次の 2 つの方法があります。

content-box: 標準ボックスモデル。W3C ボックスモデルとも呼ばれ、最近のブラウザで一般的に使用されています。

border-box: 奇妙なボックス モデル、IE ブラウザーの下位バージョンのボックス モデル

最新のブラウザおよび IE9 以降のデフォルトは content-box です。

構文形式:

box-sizing：content-box | border-box

違い：

content-box: パディングと境界線は定義された幅と高さに含まれません。

ボックスの実際の幅 = 設定された幅 + パディング + 境界線

border-box: パディングと境界線は定義された幅と高さに含まれます。

ボックスの実際の幅 = 設定された幅（パディングと境界線は実際の幅に影響しません）

要約する

以上が、CSS3 のボックス サイズ設定 (content-box と border-box) についてご紹介した内容です。お役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。