CSS display页面布局属性详解

作者：任鸟飞分类：编码发表： 2009/11/20

控制页面布局属性包括display 、float 、position,这些属性控制文档元素的可见性、显示方式、位置,本文主要利用一些实例来说明display的用法。


display:{block|inline|inline-block|inline-table|list-item|
run-in|table|table-caption|tabel-cell|table-column|
table-column-group|table-footer-group|table-header-group|
table-row|table-row-group|noone|inherit
}

我们以导航栏中的菜单项为例来详解display属性，代码如下：


<div class="nav">
<a href="home">首页</a>
<a href="about">关于我们</a>
<a href="contact">联系我们</a>
</div>
类.nav定义如下：
.nav a {display:block;}

为了方便显示，我们给a标签定了背景颜色（backgrou-color:#FF9966）右边界（margin-right:10px）下边界（margin-bottom:10px）填充（padding:10px）。

Block：以块状显示。显示样式如下：
inline：以内嵌的形式排列成行显示。显示样式如下：
inline-block：以块状的形式排列成行。显示样式如下：
inline-table：以表格的形式排列成行。显示样式如下：
list-item：以列表项的形式显示，类似<li>标签。
run-in：追加部分。根据所包含的内容显示为内嵌或块。当run-in标签中不含块状元素以及同一级别的标签的display属性不是run-in时，显示为内嵌。其他情况下显示为块。
table：表格。与普通的表格类似。样式如下：
table-caption：表格标题。类似表格标题<caption>样式。

上面只显示了 “首页”—-原因是<table>的<caption>只能显示第一个，其他两个链接在这里就看不到了。大家可以把“<caption>表格标题</caption>” 放到<table>中看一下效果如何。
table-cell：表格单元格。类似<td>,样式如下。
table-column，表格列。
table-column-group，表格列组。
table-footer-group, 表格注脚组。样式如下，请注意排列顺序。
table-header-group：表格标题组。样式如下：
table-row：表格行。与<tr>类似。样式如下：
table-row-group：表格行组。样式如下：
none：无样式，