[CSS] CSSボックスモデル

(1) ボックス モデルは 2 つあります: IE ボックス モデル (ボーダー ボックス)、W3C 標準ボックス モデル (コンテンツ ボックス)
(2) ボックス モデル: コンテンツ、パディング、マージン、ボーダー (border) の 4 つの部分に分かれています

IE ボックス モデルと W3C 標準ボックス モデルの違いは次のとおりです。

(1) W3C 標準ボックス モデル: 属性の幅と高さにはコンテンツのみが含まれ、ボーダーとパディングは含まれません(2) IE ボックス モデル: 属性の幅と高さにはコンテンツ、ボーダー、パディングが含まれます。これは、コンテンツ+ パディング + ボーダー
を指します。

IE8 以降のブラウザでどのボックス モデルを使用するかは、box-sizing (新しい CSS 属性) によって制御できます。デフォルト値は、標準のボックス モデルである content-box です。box-sizing が border-box に設定されている場合、IE は
中古ボックスモデル。IE6、7、8 で DOCTYPE が欠落している場合、ボックス モデルは IE
ボックス モデルとして解釈されます。DOCTYPE タイプがページ内で宣言されている場合、すべてのブラウザーはボックス モデルを W3C ボックス モデルとして解釈します。

おすすめ

転載: blog.csdn.net/weixin_50836184/article/details/124719052