CSSボックスモデルとは何ですか?

css ボックス モデルには、標準ボックス モデルと IE ボックス モデルが含まれます。詳細な紹介: 1. 標準ボックス モデルは、CSS のデフォルトのボックス モデルです。要素の幅と高さが、コンテンツ領域の幅と高さとして定義されます。標準ボックス モデルでは、要素の幅と高さの合計が、コンテンツ領域の幅と高さの合計として定義されます。要素はコンテンツ領域の幅に等しく、高さにはパディング、ボーダー、マージンの幅を加えたものです; 2. IE ボックス モデルは、Internet Explorer ブラウザで使用されるボックス モデルです。IE ボックス モデルでは、幅と高さは要素の幅は、コンテンツ領域の幅と高さに加え、パディングと境界線の幅として定義されます。

CSS ボックス モデルとは、Web ページ レイアウトで要素が長方形のボックスとみなされ、このボックスにはコンテンツ、パディング、境界線とマージンが含まれることを意味します。 。 CSS ボックス モデルには、標準ボックス モデルと IE ボックス モデルの 2 種類があります。

1. 標準ボックス モデル:

標準ボックス モデルは CSS のデフォルトのボックス モデルで、要素の幅と高さがコンテンツ領域の幅と高さとして定義されます。標準のボックス モデルでは、要素の幅と高さの合計は、コンテンツ領域の幅と高さにパディング、境界線、およびマージンの幅を加えたものと等しくなります。

2. IE ボックス モデル:

IE ボックス モデルは、Internet Explorer ブラウザーで使用されるボックス モデルです。 IE ボックス モデルでは、要素の幅と高さは、コンテンツ領域の幅と高さにパディングとボーダーの幅を加えたものとして定義されます。 IE ボックス モデルでは、要素の幅の合計と高さの合計は、余白の幅を除いたコンテンツ領域の幅と高さと同じになります。

これら 2 つのボックス モデルの違いをよりよく理解するために、次の例で説明します。

HTML コード:

html
<div id="box">Hello World</div>
```
CSS代码：
```css
#box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

標準のボックス モデルでは、合計要素の幅と高さは、コンテンツ領域の幅と高さにパディング、境界線、およびマージンの幅を加えたものと等しくなります。したがって、この要素の幅の合計は 200px 2 * 20px 2 * 1px 2 * 10px = 282px、高さの合計は 100px 2 * 20px 2 * 1px 2 * 10px = 172px となります。

IE ボックス モデルでは、要素の幅と高さの合計は、コンテンツ領域の幅と高さにパディングと境界線の幅を加えたものと等しくなります。したがって、この要素の幅の合計は 200px 2 * 20px 2 * 1px = 242px、高さの合計は 100px 2 * 20px 2 * 1px = 142px となります。

要素の合計幅と合計高さを計算すると、標準ボックス モデルと IE ボックス モデルの間に違いがあることがわかります。

実際の開発では、CSS の box-sizing プロパティを通じて、要素がどのボックス モデルを使用するかを制御できます。 box-sizing プロパティには、content-box と border-box という 2 つの値があります。 content-box は標準のボックス モデル、border-box は IE ボックス モデルです。デフォルト値はコンテンツボックスです。

たとえば、IE ボックス モデルを使用する場合は、box-sizing プロパティを border-box に設定できます。

css
#box {
  box-sizing: border-box;
}

要約:

2 つあります。 CSS タイプのボックス モデル: 標準ボックス モデルと IE ボックス モデル。標準のボックス モデルは要素の幅と高さをコンテンツ領域の幅と高さとして定義しますが、IE ボックス モデルは要素の幅と高さをコンテンツ領域の幅と高さにパディングの幅を加えたものとして定義します。そして国境。実際の開発では、CSS の box-sizing プロパティを通じて、要素がどのボックス モデルを使用するかを制御できます。

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