轉載：img是什麼元素？置換元素？

轉載： https://blog.csdn.net/kingliguo/article/details/52643594

img是什麼元素？

應是行內元素，判斷一個元素是行內元素，仍是塊元素，無非就是看它是不是獨佔一行。img標籤顯然沒有獨佔一行，固它是行內元素。這沒有問題。

既然img是行內元素，那爲何能夠經過CSS設置框高呢？

儘管img是行內元素，但同時它也是置換元素，置換元素通常內置框高屬性，所以能夠設置其框高。

<img src="/i/mouse.jpg" height="200" width="200"  />

那麼什麼又是「置換元素」呢？

置換元素就是會根據標籤屬性來顯示的元素。反之就是非置換元素了。

好比img根據src屬性來顯示，input根據value屬性來顯示，所以可知道img和input是置換元素，固然同理textarea, select,也是置換元素；

 

什麼是塊級元素與行級元素？

塊級元素

會佔領頁面的一行，其後多個block元素自動換行、 能夠設置width，height，設置了width後一樣也佔領一行、一樣也能夠設置   margin與padding屬性。ps:常見的塊級元素:div,img,ul,form,p等

行級元素

與其餘元素在同一行上，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不能夠改變。ps：em，strong，br,input等

display:inline-block，block，inline元素的區別

一、display：block將元素顯示爲塊級元素，從而能夠更好地操控元素的寬高，以及內外邊距，每個塊級元素都是重新的一行開始。

二、display : inline將元素顯示爲行內元素，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不能夠改變。多個相鄰的行內元素排在同一行裏，知道頁面一行排列不下，纔會換新的一行。

三、display：inline-block看上去值名inline-block是一個混合產物，實際上確是如此，將元素顯示爲行內塊狀元素，設置該屬性後，其餘的行內塊級元素會排列在同一行。好比咱們li元素一個inline-block，使其既有block的寬度高度特性，又有inline的同行特性，在同一行內有不一樣高度內容的元素時，一般要設置對齊方式如vertical-align: top;來使元素頂部對齊。