深入理解display屬性——前端佈局常用重要屬性

小註：display屬性在網頁佈局中非常常見，但經常用到的僅僅是block、inline-block、inline和none等寥寥幾個屬性值，下麵本人將詳細介紹display屬性的各個方面

定義

display屬性用於規定元素生成的框類型，影響顯示方式

常用值: none | inline | block | inline-block | list-item

初始值: inline

應用於: 所有元素

繼承性: 無

[註意]IE7-瀏覽器不支持table類屬性值及inherit

分類

block

【特征】

[1]不設置寬度時，寬度為父元素寬度

[2]獨占一行

[3]支持寬高

【不支持的樣式】

[1]vertical-align

inline

【特征】

[1]內容撐開寬度

[2]非獨占一行

[3]不支持寬高

[4]代碼換行被解析成空格

【不支持的樣式】

[1]background-position

[2]clear

[3]clip

[4]height | max-height | min-height

[5]width | max-width | min-width

[6]overflow

[7]text-align

[8]text-indent

[9]text-overflow

inline-block

【特征】

[1]不設置寬度時，內容撐開寬度

[2]非獨占一行

[3]支持寬高

[4]代碼換行被解析成空格

【不支持的樣式】

[1]clear

none

【特征】

隱藏元素並脫離文檔流

list-item

【特征】

[1]不設置寬度時，寬度撐滿一行

[2]獨占一行

[3]支持寬高