HTML ボックス モデルには、標準ボックス モデル (コンテンツ ボックス モデル) と IE ボックス モデル (ボーダー ボックス モデル) の 2 つがあります。
標準ボックスモデルはW3C規格で規定されており、要素の幅と高さはコンテンツ領域(content)のみとなり、ボーダー(border)とパディング(padding)は含まれません。 。要素の幅または高さの合計は、コンテンツ領域の幅または高さ、境界線の幅または高さ、およびパディングの幅または高さと同じです。
IE ボックス モデルは、初期の Internet Explorer ブラウザによって提案されたボックス モデルです。標準のボックス モデルとは異なり、IE ボックス モデルでは、要素の幅と高さにコンテンツ領域、ボーダー、パディングが含まれます。要素の幅または高さの合計は、コンテンツ領域 (境界線とパディングを含む) の幅または高さと同じです。
以下、標準ボックスモデルとIEボックスモデルそれぞれの具体的なコード例を示します。
最初に、標準ボックス モデルのコード例を示します。
This is the content of the box.
上の例では、 以下は IE ボックス モデルのコード例です: This is the content of the box. IE ボックス モデルでは、 以上がいくつかのタイプの HTML ボックス モデルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。 要素を使用してボックスを作成します。 CSS スタイルを設定することで、ボックスの幅、高さ、境界線、パディング、およびマージンを指定します。標準のボックス モデルでは、要素の合計幅 = コンテンツ領域の幅、境界線の幅、パディングの幅 = 200px 2px 20px = 222px、合計高さ = コンテンツ領域の高さ、境界線の高さ、パディングの高さ = 100px 2px 20px = 122px。
ログイン後にコピーbox-sizing: border-box;## を設定することで IE を使用できます。 ＃ボックスモデル。 IE ボックス モデルでは、要素の幅の合計 = コンテンツ領域の幅 = 200px、高さの合計 = コンテンツ領域の高さ = 100px となります。
![あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
