首先骤铃，我們來回顧一下內(nèi)聯(lián)元素和塊級元素
內(nèi)聯(lián)元素可以嵌套內(nèi)聯(lián)元素沛善，塊級元素可以嵌套部分塊級元素并也能嵌套內(nèi)聯(lián)元素蹲坷，但內(nèi)聯(lián)元素不能嵌套塊級元素驶乾。塊級元素為block邑飒，內(nèi)聯(lián)元素為inline，擁有“inline”特性的同時又擁有“block”的特性稱為replace元素级乐。
在做項目的時候幸乒，犯了個錯，進了坑
<p class="opr-worldcup-tieba2-checkcode">
<input class="opr-worldcup-tieba2-checkcode-input c-input" placeholder="輸入驗證碼">
<div class="opr-worldcup-tieba2-checkcode-img-wrapper">image</div>
<span class="opr-worldcup-tieba2-checkcode-change-code">看不清?</span>
</p>
在控制臺一看唇牧，被解析成了這個樣子
<p class="opr-worldcup-tieba2-checkcode">
<input class="opr-worldcup-tieba2-checkcode-input c-input" placeholder="輸入驗證碼">
</p>
<div class="opr-worldcup-tieba2-checkcode-img-wrapper">image</div>
<span class="opr-worldcup-tieba2-checkcode-change-code">看不清?</span>
<p> </p>
我們會發(fā)現(xiàn)罕扎，<div>分別在一行顯示，而此時"p元素的開始"與"p元素的結(jié)束"也在不同的一行顯示
原來丐重，在```<p>```元素中是不能嵌套```<div>```元素的腔召，在```<p>```標簽還沒結(jié)束時，遇到下一個塊級元素就會自動結(jié)束扮惦。
試了一下
<p>元素的開始
這段代碼會被瀏覽器會解析為
<p>元素的開始</p>
那我們就會想如果把div設(shè)置為內(nèi)聯(lián)樣式的話臀蛛，是不是就不會出現(xiàn)這樣的現(xiàn)象啦
<p>這是p元素的開始
<div style="display: inline">div元素1</div>
<div style="display: inline">div元素2</div>
這是p元素的結(jié)束
</p>
即使我們給<div>添加樣式，將它變成內(nèi)聯(lián)元素形式,他的效果還是一樣的崖蜜，
<p>這是p元素的開始 </p>
<div style="display: inline">div元素1</div>
<div style="display: inline">div元素2</div>
這是p元素的結(jié)束
<p></p>
我們再用JavaScript代碼來檢索一個頁面中的p元素：
var p = document.querySelectorAll("p"); //查找p元素
console.log(p.length); // 2個元素
我們以為會是1 結(jié)果是2
因此得出結(jié)論：
在p元素是不能嵌套Div元素的浊仆，它會被瀏覽器解析為頁面中p元素的兩倍數(shù)量，也就是開始標簽被解析為一個p元素豫领，結(jié)束標簽被解析為一個p元素抡柿。
元素的三個類別：
那哪些塊元素里面不能放哪些塊元素呢？我們可以先把所有的塊元素再次劃分成幾個級別的等恐，我們已經(jīng)知道<html>是在最外層洲劣，<html>下一級里面只會有<head>、<body>课蔬、囱稽。而我們已經(jīng)知道了可視的元素只會出現(xiàn)在<body>里，所以我們把<body>劃在第一個級里面二跋，接著战惊，把不可以自由嵌套的元素劃在第三個級，其他的就歸進第二個級扎即。所謂的不可自由嵌套的元素就是里面只能放內(nèi)聯(lián)元素的吞获，它們包括有：標題標記的<h1>、<h2>铺遂、<h3>衫哥、<h4>茎刚、<h5>襟锐、<h6>、<caption>膛锭；段落標記的<p>粮坞；分隔線<hr>蚊荣。
為什么說第二級的元素可以自由嵌套呢？我們可以把它們看成是一些容器（或者說是盒子）莫杈， 這些容器的大小可以自由變化互例，例如我們可以把<ul>嵌在<div>里面，也可以把<div>嵌在<li>里面筝闹。
在HTML里有幾個元素是比較特別的：<ul>媳叨、<ol>、<dl>关顷、<table>糊秆，它們的子一層必須是指定元素，<ul>议双、<ol>的子一級必須是<li>痘番；<table>的子一層必須是<caption> 或<thead>、<tfoot>平痰、<tbody>等汞舱，而再子一層必須是<tr> （<tr>只存在于<thead>、<tfoot>宗雇、<tbody>中）昂芜，之后才是可放內(nèi)容的<td>或者<th>。
<img>和<input>有著其它內(nèi)聯(lián)元素沒有的寬和高赔蒲。它們在"inline"的情況下又有"black"的特性说铃，W3C稱之為replace元素。
