深入理解网页布局中的display属性

display属性在网页布局中非常常见，但经常用到的仅仅是block、inline-block、inline和none等寥寥几个属性值，本文将详细介绍display属性的各个方面

定义

display属性用于规定元素生成的框类型，影响显示方式

值: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit

初始值: inline

应用于: 所有元素

继承性: 无

注意：IE7-浏览器不支持table类属性值及inherit

分类

block

【特征】

1、不设置宽度时，宽度为父元素宽度

2、独占一行

3、支持宽高

【标签】

注意：menuitem标签只有firefox支持

【不支持的样式】

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、代码换行被解析成空格
 
  
【标签】