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

深入理解display屬性——前端布局常用重要屬性，深入理解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]支援寬高