深刻理解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]支持寬高