display:inline-block,block,inline的區別與用法


一、首先要了解什么是塊級元素與行級元素

塊級元素

會占領頁面的一行,其后多個block元素自動換行、 可以設置width,height,設置了width后同樣也占領一行、同樣也可以設置   margin與padding屬性。

ps:常見的塊級元素:div,img,ul,form,p等

行級元素

與其他元素在同一行上,高度,行高以及底邊距不可改變,高度就是內容文字或者圖片的寬度,不可以改變。

ps:em,strong,br,input等

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

1、display:block將元素顯示為塊級元素,從而可以更好地操控元素的寬高,以及內外邊距,每一個塊級元素都是從新的一行開始。

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

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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com