css中對元素有兩種分類：
一、行內元素與塊級元素
這種分類一目瞭然
說到塊級元素，我們就能想到display: block，
說到行內元素，我們就能想到display: inline。
下面我們來看看這兩者的特點
塊級元素特點：
1. 默認獨自佔據一行，左右兩邊都沒有元素；
2. 可以設置寬高，在不設置寬度的情況下，默認爲父元素的寬度一致。
常見的塊級元素：<h1></h1>; <p></p>; <div></div>等等。
行內元素特點：
1. 左右兩邊都可以有元素，和其他元素在一行上；
2. 不可以設置寬高，其寬度就是內容的寬度。
常見的行內元素：<span></span>; <a></a>; <img></img>等等。
二、替換元素與非替換元素
這種分類理解起來會抽象一些
替換元素：
替換元素是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。
這是什麼意思呢？我們舉一個例子就能理解：
img標籤，只寫這一個標籤，不添加屬性，頁面上是顯示不出來你要的圖片的，但是我們往img標籤裏面添加src，這時候頁面上就能顯示出你要的圖片，src不同，頁面上顯示出來的內容也就不同。
同樣爲替換元素的還有<input>標籤，<textarea>標籤等等
非替換元素：
理解了什麼是替換元素，理解非替換元素就很簡單了，他們將內容直接告訴瀏覽器，將其顯示出來
比如我們常用的<p>標籤，瀏覽器直接會將<p>標籤裏面的東西顯示出來。
而塊級元素與行內替換元素是可以設置寬高的，行內非替換元素無法設置寬高，但是行內元素和塊級元素一樣，都擁有盒子模型，行內元素在垂直方向的padding與margin是無效的。