一图贸、首先要了解什么是塊級元素與行級元素
> - 塊級元素
會占領(lǐng)頁面的一行，其后多個block元素自動換行、 可以設(shè)置width疏日，height乏盐，
設(shè)置了width后同樣也占領(lǐng)一行、同樣也可以設(shè)置 margin與padding屬性制恍。
ps:常見的塊級元素:div,ul,form,p等
> - 行內(nèi)元素
與其他元素在同一行上父能，高度，行高以及底邊距不可改變净神，高度就是內(nèi)容文字或者圖片的寬度何吝，不可以改變。
ps：em鹃唯，strong等
二爱榕、display:inline
display:inline 元素顯示為行內(nèi)元素。
元素都使用默認高度坡慌，高度黔酥，行高以及底邊距不可改變，
高度就是內(nèi)容文字或者圖片的寬度洪橘，不可以改變跪者，你設(shè)置了也沒有效果。
不強制換行,可以橫向并排幾個熄求。
多個相鄰的行內(nèi)元素排在同一行里渣玲，直到頁面一行排列不下，才會換新的一行弟晚。
三忘衍、display:block
display:block 元素顯示為塊級元素。
元素默認情況下獨占一行（就像元素前后都給加了一個換行）卿城，可以設(shè)置寬度枚钓、高度、以及內(nèi)外邊距搀捷。
是強制換行的,下一個元素,會自動換行到這個下面排列,不會橫向并排。
四勉耀、display:block
display：inline-block看上去值名inline-block是一個混合產(chǎn)物指煎，實際上確是如此。
既有行級元素的特性枢纠，也有塊級元素的特性随静，因此在同一行膜毁，能設(shè)置寬高候醒。
將元素顯示為行內(nèi)塊狀元素，設(shè)置該屬性后室奏，其他的行內(nèi)塊級元素會排列在同一行火焰。
比如我們li元素一個inline-block劲装，使其既有block的寬度高度特性胧沫，又有inline的同行特性，
在同一行內(nèi)有不同高度內(nèi)容的元素時占业，通常要設(shè)置對齊方式如vertical-align: top;來使元素頂部對齊绒怨。
PS : 有遺漏的細節(jié)請留言。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
