首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 网页制作新手上路

CSS布局带来的巨大影响:CSS display属性值

来源: 互联网    日期:2008-10-31
 

它是怎样实现的?

你可以给HTML元素指定与表格相关的display属性值,使得它们像表格元素那样渲染。以下是这些可用的display属性值:

  • table
    使该元素按table样式渲染
  • table-row
    使该元素按tr样式渲染
  • table-cell
    使该元素按td样式渲染
  • table-row-group
    使该元素按tbody样式渲染
  • table-header-group
    使该元素按thead样式渲染
  • table-footer-group
    使该元素按tfoot样式渲染
  • table-caption
    使该元素按caption样式渲染
  • table-column
    使该元素按col样式渲染
  • table-column-group
    使该元素按colgroup样式渲染

等等……难道用table布局不是错的吗?

可能你会对我们上面给出的布局实例有点不爽——毕竟,正如我自己也是一名WEB标准化的拥护者,我们不都一直坚持不应该使用table来进行布局吗?
table元素在HTML当中是一个包含语义的标签:它描述什么是数据。因此,你只能用它来标记那些需要制表的数据,例如一张财务信息表。如果数据能够以电子表格的形式保存在你的电脑中,那它在HTML文档中很可能需要用到table标签进行标记。
从另一方面来看,display的table属性值只是声明了某些元素在浏览器中的样式——它不包含语义。如果使用table元素来进行布局,它将会告诉客户端:这些数据是制表的。使用一些display属性被设置为table和table-cell之类的div标签,除了告诉客户端以某种特定的样式来渲染它们以外,不会告诉客户端任何语义,只要客户端能够支持这些属性值。
当然,我们同样还要注意,当我们真的需要制表数据的时候不要使用一大堆被声明为display:table;的div元素。
我们上面的那个例子是一个简单的单行三列布局,无需费尽心思,我们就能够使用这种技术轻松实现复杂的栅格布局。

匿名表格元素

CSS表格除了包含table布局的普通规则之外,同时还有着CSS table布局的超强特性:缺少的表格元素会被浏览器以匿名方式创建。CSS2.1规范中写道:

CSS2.1表格模型中的元素,可能不会全部包含在除HTML之外的文档语言中。这时,那些“丢失”的元素会被模拟出来,从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象,使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

这段话的意思是,如果我们为元素使用“display:table-cell;”属性,而不将其父容器设置为“display:table-row;”属性,浏览器会默认创建出一个表格行,就好像文档中真的存在一个被声明的表格行一样。
让我们用个简单的例子来研究下它的这一特性:以下是三栏栅格布局。我们将会用三份不同的HTML样例,而它们将表现出相同的视觉效果。

首先,以下是能够生成三列布局样例的其中一份:

<div class="container">
  <div class="row">
    <div class="cell">CELL A</div>
    <div class="cell">CELL B</div>
    <div class="cell">CELL C</div>
  </div>
</div>

这份嵌套的div元素看起来不是那么让人兴奋,稍等一会,我们现在来做点什么。它的CSS样式也非常简单:

.container {
  display: table;
}
 
.row {
  display: table-row;
}
 
.cell {
  display: table-cell;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  padding: 1em;
}

以上CSS给类名为container的元素定义了“display:table;”属性,类名为row的元素定义了“display:table-row;”,类名为cell的元素定义了“display:table-cell;”,同样还给它定义了边框、高度和宽度值。
以上HTML文档明确地为三个单元格定义了包含它的表格和表格行,使用到了所有我们创建的CSS类名。然而,我们可以减少这些标签,移除一行div元素试试:

<div class="row">
  <div class="cell">CELL A</div>
  <div class="cell">CELL B</div>
  <div class="cell">CELL C</div>
</div>

即使上面的代码遗漏了声明表格的那一行,浏览器仍将创建一个匿名的表格行。我们还可以移除更多的代码:

<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>

以上代码遗漏了声明表格和表格行的代码,浏览器同样会创建出这些匿名的盒对象。即使缺少这些标签元素,最终的效果仍然是一样的。



文章共3页:  [1] [2] [3]


更多的CSS布局带来的巨大影响:CSS display属性值请到论坛查看: http://BBS.TC711.COM



【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源: 互联网    日期:2008-10-31   

发 表 评 论
查看评论

  您的大名:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容: 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网,如有侵犯您的版权或其他问题,请通知管理员,我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报