网页对象的显示类型可以使用display属性来显式定义。任何元素都可以通过display属性改变默认显示类型,因此也会改变该元素所对应的网页布局结构。
在CSS2.1中,display属性共有18个选项值,详细说明如下:
- block:块状显示,在元素后面添加换行符,也就是说其他元素不能在其后面并列显示。
- none:隐藏显示,这与visibility:hidden;声明不同,display:none;声明不会为被隐藏的元素保留位置。
- inline:行内显示,在元素后面删除换行符,多个元素可以在一行内并列显示。
- inline-block:行内显示,但是元素的内容以块状显示,行内其他行内元素还会显示在同一行内。
- compact:紧凑的块状显示,或基于内容之上的行内显示。
- marker:在容器对象之前或之后显示,该属性值必须与:after和:before伪元素一起使用。
- inline-table:具有行内特征的表格显示。
- list-item:具有块状特征的列表项目显示,并可以添加可选项目标志。
- run-in:块状显示或基于内容之上的行内显示。
- table:具有块状特征的表格显示。
- table-caption:表格标题显示。
- table-cell:表格单元格显示
- table-column:表格列显示。
- table-column-group:表格列组显示。
- table-header-group:表格标题组显示。
- table-footer-group :表格页脚组显示。
- table-row:表格行显示。
- table-row-group:表格行组显示。
更详细说明可以参考CSS参考手册,CSS3新增了box显示类型,关于该技术话题请参阅下一章详细讲解。如果单从布局角度来分析,这些显示类型都可以划归为block和inline两种基本显示形态,其他类型都是这两种类型的特殊显示。其中真正能够应用并获得所有浏览器支持的取值只有4个:block、none、inline、list-item。
none属性值表示隐藏并取消盒模型,这样元素所包含的内容就不会被浏览器解析和显示,同样这个盒子所包含的任何元素都会被浏览器忽略,不管它们是否被声明为其他属性。
list-item属性值表示列表项目,其实质上也是块状显示,不过是一种特殊的块状类型,它增加了缩进和项目符号。
另外,还有一些比较有用的显示类型,如table、table-cell、inline-block、inline-table等,它们在特殊布局中具有重要的实用价值。