いくつかのタイプの HTML ボックスモデル-htmlチュートリアル-php.cn

いくつかのタイプの HTML ボックスモデル

WBOY

リリース： 2024-02-19 21:02:06

オリジナル

516 人が閲覧しました

いくつかのタイプの HTML ボックスモデル

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。

以下は IE ボックスモデルのコード例です:

<!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>

ログイン後にコピー

IE ボックスモデルでは、box-sizing: border-box;## を設定することで IE を使用できます。＃ボックスモデル。 IE ボックスモデルでは、要素の幅の合計 = コンテンツ領域の幅 = 200px、高さの合計 = コンテンツ領域の高さ = 100px となります。

上記のコード例を通して、標準ボックスモデルと IE ボックスモデルの違いが明確にわかります。実際の開発では、さまざまなニーズとブラウザの互換性に基づいて、どのボックスモデルを使用するかを選択する必要があります。

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