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


猜你喜欢
- 导语哈喽!我是木木子,又到了今日更新时刻!我们来看看写什么呢?小编有个好兄弟最近在追妹子,跟妹子打得火热!就差临门一脚了,这一jio我帮忙补
- 目录项目地址安装导入使用1 创建连接2 执行sql语句3 select 方法4 insert_into 方法5 merge_in
- 本文实例为大家分享了vuejs实现下拉框菜单选择的具体代码,供大家参考,具体内容如下方法一:<script type="te
- 前言:数据库是大多数 Web 应用的基础设施,只要想把数据存储下来,就离不开数据库,下面将一起学习一下如何给 Flask 应用添加数据库支持
- 【问题描述】在系统管理进行手工备份时,出现提示“无法打开备份设备'E:\自动备份\ufidau8xTmp\UFDATA.BAK
- DesktopNexus 是我最喜爱的一个壁纸下载网站,上面有许多高质量的壁纸,几乎每天必上, 每月也必会坚持分享我这个月来收集的壁纸但是
- 笔者最近在学习用OpenCV做人脸识别,用的是python语言,Anaconda里面自带的Spyder编辑器,但是按照人脸识别的教程安装好O
- 本文实例讲述了php动态生成版权所有信息的方法。分享给大家供大家参考。具体实现方法如下:function copyright($start,
- 在极坐标中,圆的表示方式为:x=x0+rcosθy=y0+rsinθ圆心为(x0,y0),r为半径,θ为旋转度数,值范围为0-359如果给定
- 一、问题描述 SQL Plus WorkSheet是一个窗口图形界面的SQL语句编辑器,对于那些喜欢窗口界面而不喜欢字符界面的用户,该工具相
- 相信大多数人都遇到过多实例安装mysql吧,相信大多数人只要找到一份多实例安装的教程就会很容易搞定了,但是越是顺利的安装过程越让我们不安,为
- 一、需求需求很简单,就是需要查询一个报表,只有1个表,数据量大约60万左右,但是中间有些逻辑。先说明一下服务器配置情况:1核CPU、2GB内
- 什么是PRC&GRPCRPC是远程过程调用(Remote Procedure Call)的缩写形式, RPC 的主要功能目标是让构建
- 本文主要介绍了数据处理方面的内容,希望大家仔细阅读。一、数据分析得到了以下列字符串开头的文本数据,我们需要进行处理二、回滚我们需要对http
- 在对列表的元素进行找寻时,会频繁的说到遍历的理念。对于复杂的遍历要求,如多个列表中查找就显然不适合用for循环。本篇所要带来的是zip()
- 本文实例讲述了Python读取文件内容的三种常用方式。分享给大家供大家参考,具体如下:本次实验的文件是一个60M的文件,共计392660行内
- 本文实例讲述了Python实现随机创建电话号码的方法。分享给大家供大家参考,具体如下:当需要随机的生成一些电话号码的时候,可以使用以下脚本,
- substr(string ,1,3) 函数解读:取string 中重左往右取3字长的字符串。结果为:str从右往左呢?应该有另一个函数来提
- 使用suds这个第三方模块from suds.client import Clienturl = 'http://ip:port/?
- 本篇内容通过GitHub仓库创建过程以及创建连接后的上传与下载,详细介绍了Git版本控制器使用情况,来看下。首先介绍一下什么是Git:git