CSSにおけるボックスモデルの種類の違い

ボックス モデル が CSS の重要な概念であることはわかっていますが、ボックス モデルを理解することによってのみ、レイアウトとスケジュールを改善することができます。しかし、一般的に言えば、ボックス モデルには 2 つのタイプがあり、1 つは W3C ボックス モデルのような IE ボックス モデルです。 、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 ボックス モデル」を選択するにはどうすればよいですか?これは非常に簡単で、Web ページの先頭に doctype ステートメント を追加するだけです。 doctype ステートメントを追加しない場合、各ブラウザーは独自の動作に従って Web ページを理解します。つまり、ie ブラウザーは ie ボックス モデルを使用してボックスを解釈し、ff は標準の w3c ボックス モデルを使用してボックスを解釈します。ボックスを解釈して、Web ページが異なるブラウザーでは異なるように表示されます。逆に、doctype 宣言を追加すると、すべてのブラウザーは標準の w3c ボックス モデルを使用してボックスを解釈し、Web ページは各ブラウザーで一貫して表示されます。

追記: CSS におけるマージンとパディングの違い

CSS では、マージンは、それ自体のフレームとその外側の別のコンテナの境界線との間の距離を指します。これは、コンテナの外側の距離であるパディングは、コンテナ内の距離です。 。

1. パディング

1. 構文構造

(1)

パディング-左

:10px; 左

パディング(2)右パディング:10px; -top

: 10px; 上部のパディング

(4) padding-bottom

: 10px; 下部のパディング

(5) パディング: 4 つの側面すべてに 10px のパディング: 10px 20px;下、左、右のパディング

(7) パディング:10px 20px 30px; 上、左、右、下のパディング

(8) パディング:10px 20px 30px 40px; 上、右、下、左のパディング マージン

2.可能な値

(1) length はパディングの長さを特定の単位で指定します

(2) % 親要素の幅に基づくパディングの長さ

(3) 自動ブラウザ パディングを計算する

(4)継承では、パディングは親要素から継承する必要があると規定されています

3. ブラウザの互換性の問題

(1) すべてのブラウザがパディング属性をサポートしています

(2) 属性値「inherit」をサポートしている IE のバージョンはありません

これらの事例を読んでその方法をマスターした方は、さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS3 の translation 属性の詳細な紹介

CSS3 で回転ハロー効果を実装する手順

CSS3 の border-image 属性の詳細な紹介

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