一、首先要了解什么是塊級元素與行級元素
塊級元素
會占領頁面的一行,其后多個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;來使元素頂部對齊。
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。