CSS中block級(jí)和inline級(jí)對(duì)象區(qū)別
本文通過(guò)實(shí)例向大家描述一下CSS中block級(jí)和inline級(jí)對(duì)象的區(qū)別，這個(gè)看似簡(jiǎn)單的問(wèn)題事如果能透徹地理解，會(huì)受益匪淺，Inline級(jí)對(duì)象可以使用vertical-align屬性控制其垂直對(duì)齊，block級(jí)對(duì)象不可以。
CSS中block級(jí)和inline級(jí)對(duì)象的區(qū)別
這個(gè)看似簡(jiǎn)單的問(wèn)題事如果能透徹地理解，會(huì)受益匪淺。
◆下圖講解了block級(jí)對(duì)象和inline級(jí)對(duì)象的區(qū)別:
◆下面是block級(jí)對(duì)象和inline級(jí)對(duì)象的基本區(qū)別:
Block級(jí)對(duì)象會(huì)自然地水平充滿其父容器，因此沒(méi)有必要為之設(shè)置100%寬度屬性
Block級(jí)對(duì)象的起始擺放位置是其父容器的左上邊界，并順排在其前面的兄弟Block對(duì)象的下方（除非設(shè)置float或絕對(duì)位置）
Inline級(jí)對(duì)象會(huì)忽略其寬度和高度設(shè)置
Inline級(jí)對(duì)象會(huì)隨著文字排版，并受排版屬性的影響（如white-space,font-size,letter-spacing）
Inline級(jí)對(duì)象可以使用vertical-align屬性控制其垂直對(duì)齊，block級(jí)對(duì)象不可以
Inline級(jí)對(duì)象的下方會(huì)保留一些自然的空間，以適應(yīng)字母g一類的會(huì)向下探出的筆畫(huà)
一個(gè)設(shè)置為float的inline對(duì)象將變成block對(duì)象
【編輯推薦】
- IE與FF不兼容網(wǎng)頁(yè)布局CSS問(wèn)題解決方案
- JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式
- DIV CSS建站對(duì)瀏覽器兼容性和注意事項(xiàng)
- CSS中Float和Clear屬性用法
- 解讀DIV CSS網(wǎng)頁(yè)布局中CSS無(wú)效十個(gè)原因
