我們習(xí)慣將html中元素分類為行內(nèi)元素和塊級元素，如下：

·常見塊級元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；

·常見行內(nèi)元素有：span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video等

而他們明顯的區(qū)別是：

·塊級元素：會(huì)自動(dòng)換行，在橫向充滿其父元素的內(nèi)容區(qū)域，默認(rèn)獨(dú)占一行的，可修改寬高；

·行內(nèi)元素：不會(huì)自動(dòng)換行，行內(nèi)元素左右可以有其他元素，行內(nèi)元素的寬高大多是auto*auto。；

·注意：行內(nèi)元素設(shè)置寬高無效（但是行內(nèi)置換元素可以設(shè)置寬高，下面有詳細(xì)解釋）、設(shè)置上下margin無效，設(shè)置上下padding類似無效（不影響文檔流排列）

?? <div style="border:1px solid red;width:400px;">設(shè)置塊級元素的寬，依舊會(huì)自動(dòng)換行，因?yàn)樗?dú)占一行</div>?? <span style="border:1px solid purple;width:200px;height:25px;">行內(nèi)元素設(shè)置寬高無效</span>?? <span style="border:1px solid blue;margin:20px;">行內(nèi)元素設(shè)置上下的margin無效</span>?? <span style="border:1px solid blue;padding:20px;">行內(nèi)元素設(shè)置上下的padding也無效</span><br>?? <div>塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字，塊狀元素多行多行文字</div>

行內(nèi)元素怎么樣可設(shè)置寬高

當(dāng)然使用display:block;和display：inline-block;樣式可以實(shí)現(xiàn)轉(zhuǎn)換為塊級元素和行內(nèi)塊級元素（可設(shè)置寬高的行內(nèi)元素），行內(nèi)元素還可以通過添加float來設(shè)置寬高，因?yàn)椴徽撌裁丛乇旧硎鞘裁?#xff0c;當(dāng)它浮動(dòng)時(shí)就會(huì)生成一個(gè)塊級框；

????? <span style="display: inline-block;width:400px;height:60px;border:1px solid blue;">當(dāng)使用display：inline-block；后，行內(nèi)元素可以設(shè)置寬高</span>????? <span style="display: block;height:60px;border:1px solid purple;">當(dāng)使用display:block;行內(nèi)元素轉(zhuǎn)為塊級元素</span>????? <span style="float: left;width:400px;height:60px ;border:1px solid orangered;">使用float，任何元素自身會(huì)生成一個(gè)塊級框，這是因?yàn)橛|發(fā)了BFC</span>

但是還有另外一種分類方式：可替換元素和不可替換元素的分類

·替換元素：替換元素根據(jù)其標(biāo)簽和屬性來決定元素的具體顯示內(nèi)容，<img><input><textarea><select><object>等。替換一般有內(nèi)在尺寸如img默認(rèn)的src屬性引用的圖片的寬高，表單元素如input也有默認(rèn)的尺寸。img和input的寬高可以設(shè)定。

· 不可替換元素：即將內(nèi)容直接表現(xiàn)給用戶端。

·注意：幾乎大部分的替換元素都是行內(nèi)元素，所以說如input、img、textarea是行內(nèi)元素但是是可以設(shè)置寬高的說法。

?? <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;">

總結(jié)

以上是生活随笔為你收集整理的行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。