ボックスモデルを理解する

ボックス モデルには、W3C ボックス モデルと IE ボックス モデルの 2 種類があります

ボックス モデルには、マージン、ボーダー、パディング、コンテンツが含まれます

W3C 要素の幅 = コンテンツの幅

IE 要素の幅 = コンテンツ+パディング+ボーダー

個人的には、IE で定義されたボックス モデルよりも、W3C で定義されたボックス モデルの方が合理的だと思います。

要素の幅には、ボーダーとパディングが含まれる必要があります。これは、現実の

W3C のボックスと同じです。また、独自の問題にも気づいたので、content-box と border-box という 2 つの属性を含む新しいスタイルの box-sizing を CSS3 に追加しました。

content-box: width=content+padding+border

border-box: width=width (style で指定された幅)

1. 行レベル要素の場合、margin-top と margin-bottom は無効です。上部要素と下部要素、margin-left と margin-right は有効です

2. 隣接するブロックレベル要素 margin-bottom と margin-top の場合、値メソッド

1) は両方とも正の数です: 最大距離 = Math を取得します。 .max(margin-botton , margin-top)

2) すべて負の数です: 最小距離を取る = Math.min(margin-botton,margin-top)

3) 上部は正の数で、下部は正の数ですが負の数、または上部が負の数で下部が正の数: 正と負の距離の加算 = margin-botton+margin-top

以上がボックスモデルを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。