HTML ブロックレベル要素、インライン要素、およびインラインブロック要素間のネスト規則

1.はじめに

要素間の入れ子の規則を体系的に整理したことはありませんでした.さまざまな要素を自由に入れ子にできるとずっと思っていましたが、実際にコードを入力する過程で、そうではないことがわかりました.ほとんどのタグは入れ子にすることができます.ただし、次のようないくつかの特別な規則があります: p タグや div タグなどのブロックレベルのタグは、p タグ内にネストできません。
このブログは、さまざまな種類の要素間の入れ子のルールを完全に理解することを目的としています。

一般的なブロックレベルの要素

<div>, <p>, <h1> ~ <h6>, <ul>, <li>, <table>, <form>,<section>など<header>_

ブロックレベル要素の MDN リスト

一般的なインライン要素

<span>、<strong>、、、など<i>_<a><button><em>

インライン要素の MDN リスト

補足： MDNではインライン要素にインラインブロック要素が割り当てられています。

一般的なインラインブロック要素

<img>、<input>、、、など<textarea>_<button><audio><video>

2. 具体的なルール

1. ブロックレベル要素の入れ子規則

① 特殊`<p>`, `<h1> ~ <h6>`,`<dt>`ブロックレベル要素

これらの要素には特別なルールがあります。これらのタグは、ブロックレベルの要素をネストすることはできません。インライン要素またはインラインブロック要素のみをネストできます。ブロックレベルの要素に設定しても機能しませんdisplay: inline。
これらの特別な要素内にブロックレベルの要素をネストすると、ブラウザは要素の前後の 2 つのタグを 2 つのペアのタグに解析します。現時点では、要素に設定したスタイルをネストされた要素に適用することはできません。

たとえば、次のとおりです<p>。

  <p>p标签内包裹文本</p>
  <p>p标签内包裹行内元素 <strong>strong</strong></p>
  <p>p标签内包裹行内元素 <span>span</span></p>
  <p>p标签内包裹行内块元素img 
    <img src="./image/img.png" alt="" style="width: 60px;height: 60px">
  </p>
  <p>p标签内包裹行内块元素audio
    <audio src="./image/起风了.mp3" style="width: 300px;height: 60px" controls="controls"></audio>
  </p>
  <p>
    <div>p标签内包裹块级元素div</div>
  </p>
  <p>
    <div>p标签内包裹块级元素div（并设置display: inline;）</div>
  </p>
  <p>
    <p>p标签内包裹块级元素p</p>
  </p>

ブラウザ分析結果:

ここに画像の説明を挿入

②その他のブロックレベル要素

最初のいくつかの特別な要素を除いて、どの要素も他のブロックレベル要素内にネストできます。
たとえば、次のとおりですdiv。

  <div>div标签内包裹文本</div>
  <div>div标签内包裹行内元素 <strong>strong</strong></div>
  <div>div标签内包裹行内元素 <span>span</span></div>
  <div>div标签内包裹行内块元素img 
    <img src="./image/img.png" alt="" style="width: 60px;height: 60px">
  </div>
  <div>div标签内包裹行内块元素audio
    <audio src="./image/起风了-买辣椒也用券.mp3" style="width: 300px;height: 60px" controls="controls"></audio>
  </div>
  <div>
    <div>div标签内包裹块级元素div</div>
  </div>
  <div>
    <div style="display:inline">div标签内包裹块级元素div（并设置display: inline;）</div>
  </div>
  <div>
    <p>div标签内包裹块级元素p</p>
  </div>

ブラウザ分析結果:

ここに画像の説明を挿入

2. インライン要素の入れ子規則

MDN によると、インライン要素には、データと他のインライン要素、およびインラインブロック要素のみを含めることができます。ただし、実験の結果、ブロックレベル要素をインライン要素内にネストすることもできることがわかりましたが、内部ブロックレベル要素の幅と高さを設定すると、親レベルのインライン要素の幅と高さは影響を受けません。親レベルのインライン要素は、ブロックレベルの要素の影響も受けます.要素の影響を受けて、1行を占有する状況があります.

たとえば、次のとおりです<span>。

  <span>span标签内包裹文本</span>
  <span>span标签内包裹行内元素 <strong style="width: 100px;height: 50px">strong</strong></span>
  <span>span标签内包裹行内元素 <i>i</i></span>
  <span>span标签内包裹行内块元素img 
    <img src="./image/img.png" alt="" style="width: 60px;height: 60px">
  </span>
  <span>span标签内包裹行内块元素audio
    <audio src="./image/起风了-买辣椒也用券.mp3" style="width: 300px;height: 60px" controls="controls"></audio>
  </span>
  <span>
    <div style="width: 250px;height: 50px">span标签内包裹块级元素div</div>
  </span>
  <span>一个普通的sapn</span>
  <span>
    <span style="display: block">span标签内包裹行内元素span（并设置display: block;）</span>
  </span>
  <span>
    <p>span标签内包裹块级元素p</p>
  </span>

ブラウザ分析結果:

ここに画像の説明を挿入

ページ表示効果:

ここに画像の説明を挿入
補足:
ブロックレベル要素をインライン要素にネストした場合、offsetHeightインライン要素によって得られる実際の高さは、埋め込まれたブロックレベル要素の高さ + 要素の前の行で最も高い高さを持つ要素の高さです+ 要素の次の行の高さ最高の高さを持つ要素の高さの合計ですが、この高さはページ表示効果に影響を与えず、占有スペースは依然として埋め込まれた要素の高さに基づいています。

  <span id="1">测试用的span</span>
  <a href="#" id="2">
    <div id="3" style="width: 300px;height: 80px;">
      这是a标签内嵌套了div标签
    </div>
  </a>
  <span id="4">测试用的span2</span>
</body>
<script>
  (function() {
      
      
    let a = document.getElementById('1')
    let b = document.getElementById('2')
    let c = document.getElementById('3')
    let d = document.getElementById('4')
    console.log(a.offsetHeight); // 实际22.5 但offset向上取整 变为23
    console.log(b.offsetHeight); // 22.5 + 22.5 + 80 = 125
    console.log(c.offsetHeight);// 80
    console.log(d.offsetHeight);// 实际22.5 但offset向上取整 变为23
    console.log(a.offsetHeight + c.offsetHeight + d.offsetHeight === b.offsetHeight);
  })()
</script>

ページ効果:
前の行の高さ:
ここに画像の説明を挿入
現在の要素の高さ:

次の行の高さ

以下の結果:

ここに画像の説明を挿入
ここで等しくないのは、スパンの高さが 22.5 であるためですが、offset の値を取ると 23 に切り上げられます。

3.インラインブロック要素の入れ子規則

<button>インラインブロック要素のほとんどは単一タグであり、他の要素は内部にネストされませんが、このような二重タグもあり、インライン要素またはブロックレベル要素を内部にネストできます (インラインブロックの場合)。 level 要素の場合、親のインラインブロック要素の幅と高さは、インラインブロック要素の幅と高さに従いますが、1 行を占めません。インライン要素の場合は何も変わりません。
たとえば、次のとおりです<button>。

  <button>
      button标签内包裹普通文本
  </button>
  <button>
    <span>
      button标签内包裹行内元素span
    </span>
  </button>
  <button>
    <span style="display: block;width: 400px;height: 50px;">
      button标签内包裹行内元素span（并设置display: block;）
    </span>
  </button>
  <button>
    <div style="width: 300px;height:100px">
      button标签内包裹块级元素div
    </div>
  </button>

ブラウザ分析結果:

ここに画像の説明を挿入

ページ表示効果:

ここに画像の説明を挿入