CSSボックスmodel_html/css_WEB-ITnose

CSS ボックス モデルは、ほとんどの CSS レイアウトと配置の基礎であり、Web ページ内の各要素を 4 つのコンポーネントを含む境界ボックスとして記述します。ボックスモデルの模式図を下図に示します。

ボックスのサイズ = コンテンツのサイズ (幅 + 高さ) + パディング + ボーダーの太さ (ボーダー) + マージン ドメイン: コンテンツ + パディング

Firefox のスコープ: コンテンツ + パディング + ボーダー

ボーダー

ボーダーの色: red green; 上下が赤、左右が緑

border-width: 1px 2px 3px; 上の幅が1px、左右の幅が2px、下の幅が1pxです。 Side は 3px

border-style: dotted dised sold double . 2 つのブロックレベル要素が上下に配置されており、最初のブロックレベル要素に margin-bottom が設定され、margin-top が設定されている場合。 2 番目のブロックレベルの要素、2 つの要素間の距離が margin-bottom + margin-top の合計より大きい方 この現象はマージンの「崩壊」現象と呼ばれ、マージンのマージとも呼ばれます。これは、小さいマージンが大きいマージンに収まることを意味します。したがって、実際の操作では、一部のマージン値が変更されてもページの効果が変わらない場合、その 2 つの外観に騙されないでください。 2 つの要素に親子関係がある場合、つまり、1 つの要素に別の要素が含まれている場合、子ブロックのマージンは親ブロックの内容に基づきます。親ブロックと子ブロックの高さが決まっていて、子ブロックの高さが親ブロックの高さを超える場合、IEとFirefoxでは全く異なる2つの処理方法になります:

IE: 親ブロックを自動的に拡張します。子要素のマージンを維持する - 親要素自体のbottom spaceとpadding-bottom spaceを維持する

Firefox: 子要素が親要素の範囲を超えてしまいます

CSSの標準仕様より、IEの処理方法は標準ではありませんが、ここではより良いかもしれません フロントエンド開発者の本来の意図に沿っていますが、その方法は min-height 属性によって負担される必要があります