基于display:table的CSS布局(2)
作者:catge 来源:Alipay UED 发布时间:2008-10-30 10:38:00
它是怎样实现的?
你可以给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>
以上代码遗漏了声明表格和表格行的代码,浏览器同样会创建出这些匿名的盒对象。即使缺少这些标签元素,最终的效果仍然是一样的。
猜你喜欢
- 到现在为止,你只学习了如何根据特定的条件从表中取出一条或多条记录。但是,假如你想对一个表中的记录进行数据统计。例如,如果你想统计存储在表中的
- Microsoft? SQL Server? 2000 的可用版本如下:SQL Server 2000企业版作为生产数据库服务器使用。支持
- ie的javascript失效了,不是设置的问题那么就可能是以下几点问题了~安装KAV可能会破坏系统的javascript关联,失javas
- 今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.cre
- 今天在写BLOG的Trackback时,需要用到当前页的URL地址,并且包括?后的所有参数。在网上看到以下的这段ASP代码,它的
- 天极网软件频道的图片切换特效,完全是由XHTML+CSS+JS实现的图片切换特效,弄了好半天啊!!如果您使用或者转载请别忘了加我的一个连接啊
- 脚本调试第一步:设置中断(鼠标左键点击)第二步:输入中断条件(可选功能,鼠标右键点击红点)第三步:触发中断(当符合条件是,中断被触发)出现中
- 八种获取当前日期的js代码,第一步:把如下代码加入<head>区域中:<SCRIPT language=java
- 在制作表单的时候,我们往往用CSS来重新定义表单元素(如输入框、按钮等)的样式,以便看起来更加美观。而表单中的很多不同元素(如输入框、提交按
- 背景 background css 说明 background-image:url(&q
- 在一个群上看到好几次问到call和apply的作用,function这两个方法的效果大家都很容易理解,但一般很难让人深刻地理解使用它们的时机
- 昨天给公司服务器重做了一下系统,遇到Asp附件无法上传,之前服务器上使用好好的,怎么重做了就不正常了,于是一番google,baidu,下面
- UserAgent = Trim(Lcase(Request.Serve
- HTML 的空白符处理规则HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。我们知道,在默
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 11 - Using Fx.Morph, Fx O
- 谁在用这些导航google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜
- 关于如何区分艺术和设计的话题总是玄之又玄,并因此引发的争论也有很长一段时间。艺术家和设计师都基于相同的知识基础来创作视觉作品,但他们创作的理
- 一、事件捕捉(Event Capture)的实现问题首先在说这件事前,先感谢一下Realazy。 W3C DOM Level2的事
- 声明定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。平台:win/I
- 记得有一期ucdchina书友会里面,聊过一次大家的工作习惯问题,现在回想起来很有意思,特整理这篇文章分享给大家。关于photoshop1