我們習慣將html中元素分類爲行內元素和塊級元素，如下：
·常見塊級元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；
·常見行內元素有：span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video等
而他們明顯的區別是：
·塊級元素：會自動換行，在橫向充滿其父元素的內容區域，默認獨佔一行的，可修改寬高；
·行內元素：不會自動換行，行內元素左右可以有其他元素，行內元素的寬高大多是auto*auto。；
當然可以將行內元素display:block，這樣就可以將行內元素變爲塊狀元素了，可以設置寬高（before和after僞元素也是行內元素）
·注意：行內元素設置寬高無效（但是行內置換元素可以設置寬高，下面有詳細解釋）、設置上下margin無效，設置上下padding類似無效（不影響文檔流排列）
<div style="border:1px solid red;width:400px;">設置塊級元素的寬，依舊會自動換行，因爲它要獨佔一行</div>
<span style="border:1px solid purple;width:200px;height:25px;">行內元素設置寬高無效</span>
<span style="border:1px solid blue;margin:20px;">行內元素設置上下的margin無效</span>
<span style="border:1px solid blue;padding:20px;">行內元素設置上下的padding也無效</span><br>
<div>塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字</div>
行內元素怎麼樣可設置寬高
當然使用display:block;和display：inline-block;樣式可以實現轉換爲塊級元素和行內塊級元素（可設置寬高的行內元素），行內元素還可以通過添加float來設置寬高，因爲不論什麼元素本身是什麼，當它浮動時就會生成一個塊級框；
<span style="display: inline-block;width:400px;height:60px;border:1px solid blue;">當使用display：inline-block；後，行內元素可以設置寬高</span>
<span style="display: block;height:60px;border:1px solid purple;">當使用display:block;行內元素轉爲塊級元素</span>
<span style="float: left;width:400px;height:60px ;border:1px solid orangered;">使用float，任何元素自身會生成一個塊級框，這是因爲觸發了BFC</span>
但是還有另外一種分類方式：可替換元素和不可替換元素的分類
·替換元素：替換元素根據其標籤和屬性來決定元素的具體顯示內容，<img><input><textarea><select><object>等。替換一般有內在尺寸如img默認的src屬性引用的圖片的寬高，表單元素如input也有默認的尺寸。img和input的寬高可以設定。
· 不可替換元素：即將內容直接表現給用戶端。
·注意：幾乎大部分的替換元素都是行內元素，所以說如input、img、textarea是行內元素但是是可以設置寬高的說法。
<button style="width:200px;" >測試按鈕</button>
<img src="http://www.runoob.com/images/compatible_opera.gif" alt="" style="border:1px solid red; width:30px;height:30px;">
————————————————
版權聲明：本文爲CSDN博主「廣積糧緩稱王」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/zhouzuoluo/article/details/81064168