ホームページ > 記事 > ウェブフロントエンド > いくつかのタイプの HTML ボックス モデル
いくつかのタイプの HTML ボックス モデル
- WBOYオリジナル
- 2024-02-19 21:02:06449ブラウズ
HTML ボックス モデルには、標準ボックス モデル (コンテンツ ボックス モデル) と IE ボックス モデル (ボーダー ボックス モデル) の 2 つがあります。
標準ボックスモデルはW3C規格で規定されており、要素の幅と高さはコンテンツ領域(content)のみとなり、ボーダー(border)とパディング(padding)は含まれません。 。要素の幅または高さの合計は、コンテンツ領域の幅または高さ、境界線の幅または高さ、およびパディングの幅または高さと同じです。
IE ボックス モデルは、初期の Internet Explorer ブラウザによって提案されたボックス モデルです。標準のボックス モデルとは異なり、IE ボックス モデルでは、要素の幅と高さにコンテンツ領域、ボーダー、パディングが含まれます。要素の幅または高さの合計は、コンテンツ領域 (境界線とパディングを含む) の幅または高さと同じです。
以下、標準ボックスモデルとIEボックスモデルそれぞれの具体的なコード例を示します。
最初に、標準ボックス モデルのコード例を示します。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>This is the content of the box.</p>
</div>
</body>
</html>上の例では、<div> 要素を使用してボックスを作成します。 CSS スタイルを設定することで、ボックスの幅、高さ、境界線、パディング、およびマージンを指定します。標準のボックス モデルでは、要素の合計幅 = コンテンツ領域の幅、境界線の幅、パディングの幅 = 200px 2px 20px = 222px、合計高さ = コンテンツ領域の高さ、境界線の高さ、パディングの高さ = 100px 2px 20px = 122px。 <p>以下は IE ボックス モデルのコード例です: </p><pre class='brush:html;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<style>
.box {
box-sizing: border-box;
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>This is the content of the box.</p>
</div>
</body>
</html></pre><p>IE ボックス モデルでは、<code>box-sizing: border-box;## を設定することで IE を使用できます。 ＃ボックスモデル。 IE ボックス モデルでは、要素の幅の合計 = コンテンツ領域の幅 = 200px、高さの合計 = コンテンツ領域の高さ = 100px となります。
以上がいくつかのタイプの HTML ボックス モデルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。