CSS_CSS/HTMLにおけるボックス（ボックスモード）の解析

この記事では、ボックスのイラストを使用して CSS のボックス (ボックス モード) を分析し、CSS を学習する読者向けの明確なモデルを確立します。

W3C によって定義されたボックス パターンは次のとおりです:

width と height は Content 部分の幅と高さを定義し、パディング境界マージンの幅が順番に外側に追加されます。背景はパディング部分とコンテンツ部分を埋めます。
ただし、ブラウザの設計上の問題により、ブラウザごとに表示効果が多少異なります。
左右のマージンが2倍になる問題
ボックスがfloatの場合、IE6ではボックスの左右のマージンが2倍になります。
左内側の左マージンは明らかに5pxより大きくなります。
このとき、innerのdisplay属性をinlineとして定義します。
外箱の自動高さ計算の問題
W3C の定義によれば、float 属性のない外箱は高さを自動計算しません。高さを計算するには、両方を最後のボックスに追加する必要があります。内層。
Opera、netscape、mozilla などは外箱の高さを計算しませんが、Microsoft IE6 は外箱の高さを自動的に計算します。

上記のコードはIEでは背景が黒くなっていますが、inner2の下にclear:both属性を含むdivを追加すると、上下のマージンが正しく計算されます。ただし、Firefox にはまだ黒い背景がありません。通常の解決策は、clear:both div の高さを定義するか、全角のスペースを挿入することなので、高さを追加する必要があります。オンラインでのより良い解決策は、overflow 属性を外側の div に追加し、clear:both を同時に使用して、高さが追加されないようにすることです。

そのため、cssの外層にoverflow属性を定義し、内層の最後にclear属性を追加する必要があります。
センタリングの問題
レイアウトがレイヤー (コンテナ) に含まれている場合は、次のように要素の幅を定義し、水平方向のマージンを定義する必要があります。
中央に配置するには、次のように定義できます。水平:
#wrap {
width:760px; /* レイヤーの幅に変更します*/
margin:0 auto;

しかし、IE5/Win ではこの定義を正しく表示できません。これを解決するために、非常に便利なトリックを使用します。それは、外側のレイヤーで text-align 属性を使用することです。次のようにします:

#outer {
text-align:center;
}
#wrap {
width:760px; /* レイヤーの幅に変更します*/
:0 自動;
テキスト整列:左;

#outer の最初の text-align:center; ルールは、IE5/Win の #outer のすべての要素が中央に配置されることを定義しており、2 番目の text-align:left; は次のように定義されています。 #warp 内のテキストを左に移動します。

したがって、要素を中央揃えにした CSS では、外側の CSS で text-align:center 属性を定義し、内側の CSS で margin:x auto x auto を定義し、text-align を再定義する必要があります。