1. Introduction
I didn't systematically sort out the nesting rules between elements before. I always thought that various elements can be nested at will, but in the process of actually typing the code, I found that this is not the case. Most tags can be nested at will. However, there are some special rules, such as: block-level tags such as p tags and div tags cannot be nested inside p tags.
This blog is to thoroughly understand the nesting rules between different types of elements.
Common block-level elements
<div>, <p>, <h1> ~ <h6>, , <ul>, <li>, <table>, <form>, <section>, <header>etc.
MDN list of block-level elements
common inline elements
<span>, <strong>, <i>, <a>, <button>, <em>etc.
Supplement: In MDN, the inline block element is assigned to the inline element.
common inline block elements
<img>, <input>, <textarea>, <button>, <audio>, <video>etc.
2. Specific rules
1. Block-level element nesting rules
① Special <p>, <h1> ~ <h6>, <dt>block-level elements
These elements have special rules: these tags cannot nest any block-level elements, only in-line elements or in-line-block elements can be nested, even if we set them for block-level elements, it will not work display: inline.
If we nest block-level elements within these special elements, the browser will parse the two tags before and after the element into two pairs of tags. At this time, the style we set for the element cannot be applied to the nested element.
Take <p>for example:
<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>
Browser analysis result:
② Other block-level elements
Except for the first few special elements, any element can be nested inside other block-level elements.
Take divfor example:
<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>
Browser analysis result:
2. Inline element nesting rules
According to MDN, inline elements can only contain data and other inline elements, and inline block elements. However, after experimentation, it is found that block-level elements can also be nested within inline elements, but when setting the width and height of internal block-level elements, the width and height of parent-level inline elements cannot be affected, and parent-level inline elements will also be affected by block-level elements. Influenced by the element, there is a case of monopolizing one line.
Take <span>for example:
<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>
Browser analysis result:
Page display effect:
Supplement:
If we nest a block-level element in an inline element, then the offsetHeightactual height obtained by the inline element is the height of the embedded block-level element + the height of the element with the highest height in the previous row of elements + the height of the next row of elements The sum of the heights of the element with the highest height, but this height will not affect the page display effect, and the occupied space is still based on the height of the embedded elements.
<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>
Page effect:
height of previous line:
height of current element:
height of next line
Results of the:
The reason why it is not equal here is that the height of the span is 22.5, but when the value of offset is taken, it is rounded up to 23.
3. Inline block element nesting rules
Most of the inline block elements are single tags, and no other elements will be nested inside, but there are also <button>double tags like this, and then you can nest inline elements or block-level elements inside them, if it is an inline block-level element , the width and height of the parent inline block element will follow the width and height of the inline block element, but will not occupy a single line. If it is an inline element, nothing changes.
Take <button>for example:
<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>
Browser analysis result:
Page display effect:
