深入理解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]支持宽高