任鸟飞网页设计

控制页面布局属性包括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：无样式，

兼容性问题：大部分浏览器只能支持以上部分属性。如果想得测试或得到最好的效果，建议大家使用最新版safari，opera。