深入理解display属性

深入理解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. 代码换行被解析成空格

【标签】

 
 
【不支持的样式】
 
 
 
  
background-position
 
  
clear
 
  
clip
 
  
height | max-height | min-height
 
  
width | max-width | min-width
 
  
overflow
 
  
text-align
 
  
text-indent
 
  
text-overflow
 
 
 
 
inline-block
 
 
【特征】
 
 
 
  
不设置宽度时，内容撑开宽度
 
  
非独占一行
 
  
支持宽高
 
  
代码换行被解析成空格
 
 
 
 
【标签】