DIV+CSS 2 ボックス models_html/css_WEB-ITnose

CSS を使用してページ レイアウト DIV をレイアウトするのは、少し論理的です。

ボックス モデル、標準フローと非標準フローの違い、および位置決めの原則を理解することに重点を置きます。これら 3 つが分かれば、非常に簡単になります。 ! さらに練習して、さらに参考にしてください! 最後に、互換性の問題があります。これには実際の経験が伴います! これらの互換性スキルはすべて経験に基づいています。標準の W3C ボックス モデル。ボックス モデルの解釈はさまざまです

まず、私たちがよく知っている標準的なボックス モデルを見てみましょう。元の画像（拡大版）を表示するには、ここをクリックしてください。

上の図から、標準の W3C ボックス モデルのスコープには margin、border、padding、content が含まれており、content 部分には他の部分が含まれていないことがわかります。

写真がよく見えませんか？元の画像（拡大版）を表示するには、ここをクリックしてください。

上の図から、IE ボックス モデルのスコープには、マージン、ボーダー、パディング、コンテンツも含まれていることがわかります。標準の W3C ボックス モデルとの違いは、IE ボックス モデルのコンテンツ部分にボーダーとパディングが含まれていることです。パディング。

例: ボックスのマージンは 20 ピクセル、境界線は 1 ピクセル、パディングは 10 ピクセル、コンテンツの幅は 200 ピクセル、高さは 50 ピクセルです。標準の W3C ボックス モデルで説明すると、この位置はボックスが占める必要があるのは: 幅 20*2 +1*2+10*2+200=262px、高さ 20*2+1*2*10*2+50=112px、ボックスの実際のサイズ: 幅 1 *2+10*2+200=222px、高さ 1*2+10*2+50=72px; IE ボックス モデルを使用する場合、このボックスが占める必要がある位置は幅 20*2+200= です。 240 ピクセル、高さ 20*2+50 = 70 ピクセル、ボックスの実際のサイズは幅 200 ピクセル、高さ 50 ピクセルです。

では、どのボックスモデルを選択すればよいでしょうか？もちろん「標準W3Cボックスモデル」です。 「標準 W3C ボックス モデル」を選択する意味は何ですか? Web ページの先頭に DOCTYPE 宣言を追加するのと同じくらい簡単です。 DOCTYPE ステートメントを追加しない場合、各ブラウザーは独自の動作に従って Web ページを理解します。つまり、IE ブラウザーは IE ボックス モデルを使用してボックスを解釈し、FF は標準の W3C ボックス モデルを使用して解釈します。ボックスが異なるため、Web ページはブラウザーごとに異なって表示されます。逆に、DOCTYPE ステートメントを追加すると、すべてのブラウザーは標準の W3C ボックス モデルを使用してボックスを解釈し、Web ページはさまざまなブラウザーで一貫して表示されます。

jQueryで作った例を使って確認してみましょう。

コード 1:

上記のコードは DOCTYPE ステートメントを追加しません。IE ブラウザでは「IE ボックス モデル」を表示し、FF ブラウザでは「標準 W3C ボックス モデル」を表示します。

コード 2:

コード2とコード1の唯一の違いは加算です。先頭の DOCTYPE ステートメント。すべてのブラウザで「標準 W3C ボックス モデル」を表示します。

それでは、Web ページをさまざまなブラウザと互換性を持たせるために、標準の W3C ボックス モデルを使用しましょう