本文通過實例向大家描述一下CSS中block級和inline級對象的區(qū)別，這個看似簡單的問題事如果能透徹地理解，會受益匪淺，Inline級對象可以使用vertical-align屬性控制其垂直對齊，block級對象不可以。

CSS中block級和inline級對象的區(qū)別

這個看似簡單的問題事如果能透徹地理解，會受益匪淺。

◆下圖講解了block級對象和inline級對象的區(qū)別:

◆下面是block級對象和inline級對象的基本區(qū)別:

Block級對象會自然地水平充滿其父容器，因此沒有必要為之設(shè)置100%寬度屬性

Block級對象的起始擺放位置是其父容器的左上邊界，并順排在其前面的兄弟Block對象的下方（除非設(shè)置float或絕對位置）

Inline級對象會忽略其寬度和高度設(shè)置

Inline級對象會隨著文字排版，并受排版屬性的影響（如white-space,font-size,letter-spacing）

Inline級對象可以使用vertical-align屬性控制其垂直對齊，block級對象不可以

Inline級對象的下方會保留一些自然的空間，以適應(yīng)字母g一類的會向下探出的筆畫

一個設(shè)置為float的inline對象將變成block對象
 

【編輯推薦】

1. IE與FF不兼容網(wǎng)頁布局CSS問題解決方案
2. JavaScript動態(tài)創(chuàng)建div屬性和樣式
3. DIV CSS建站對瀏覽器兼容性和注意事項
4. CSS中Float和Clear屬性用法
5. 解讀DIV CSS網(wǎng)頁布局中CSS無效十個原因