0元购京东自营斐讯K2路由器返399元活动
置顶

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:以块状显示。 显示样式如下:display-block
  • inline:以内嵌的形式排列成行显示。 显示样式如下:display-inline
  • inline-block:以块状的形式排列成行。 显示样式如下:display-inline
  • inline-table:以表格的形式排列成行。 显示样式如下:display-inline
  • list-item:以列表项的形式显示,类似<li>标签。display-list-item
  • run-in:追加部分。根据所包含的内容显示为内嵌或块。当run-in标签中不含块状元素以及同一级别的标签的display属性不是run-in时,显示为内嵌。其他情况下显示为块。
  • table:表格。与普通的表格类似。样式如下:display-table
  • table-caption:表格标题。类似表格标题<caption>样式。
    display-table-caption
    上面只显示了 “首页”—-原因是<table>的<caption>只能显示第一个,其他两个链接在这里就看不到了。大家可以把“<caption>表格标题</caption>” 放到<table>中看一下效果如何。
  • table-cell:表格单元格。类似<td>,样式如下。display-table-cell
  • table-column,表格列。
  • table-column-group,表格列组。
  • table-footer-group, 表格注脚组。样式如下,请注意排列顺序。display-table-footer-group
  • table-header-group:表格标题组。样式如下:display-table-header-group
  • table-row:表格行。与<tr>类似。样式如下:display-table-header-group
  • table-row-group:表格行组。样式如下:display-table-header-group
  • none:无样式,

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

标签: .

发表评论

电子邮件地址不会被公开。 必填项已用*标注