前端技巧学习display:table和display:table-cell的用法

学习display:table和display:table-cell的用法

CSS中的display属性用于设置元素的展现方式,默认情况下,块元素的该属性值为block,行内元素则为inline,通过设置该属性可以实现元素显示方式的转换。表格的display属性值默认为table,所以如果将一个元素的display属性设置为table,则可以将该元素模拟为表格的呈现方式,例如:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
table {border-collapse:collapse;}
p {margin:0;}
table,.box {margin:auto;background-color:#eee;height:90px;}
td,p {border:1px solid #333;padding:20px;}
</style>
</head>
<body>
<table>
 <tr>
 <td>天道酬勤</td>
 </tr>
</table>
<br />
<div class="box"><p>天道酬勤</p></div>
</body>
</html>

这里有一个表格呈现的文字和普通标签呈现的文字,在CSS里给他们设置了相同的样式,显示效果如下:

display-table用法1.png

这里表格显示的宽度刚好是内部内容的宽度,在外边距自动的情况下,整个表格居中显示,而且表格内容也水平垂直居中显示,这是表格元素自带的样式,而下方的div和p元素是按照正常块元素的方式展现的,下面我给div元素加上display:table这个定义,试试效果:

.box {display:table;}

定义了该属性后,这个div元素也具备了表格的特征,它的宽度刚好是内容的宽度,而且可以居中显示:

display-table用法2.png

此时如果给p元素定义垂直对齐属性vertical-align是没有作用的,但如果给p元素定义一个模拟单元格的display:table-cell定义,便可以实现垂直居中的效果了:

p {display:table-cell;vertical-align:middle;}

这时候所展示的效果和第一个表格展示的效果是相同的:

display-table用法3.png

因此在有些场景中,如果元素内容的尺寸不确定,而要设置水平和垂直居中的话,则可以考虑通过display模拟表格的方式实现。表格元素默认的display属性值为table,单元格的属性值为table-cell,下面是关于表格其他标签所对应的display属性值:

display:table 块级表格(类似 <table>),表格前后带有换行符

display:inline-table 内联表格(类似 <table>),表格前后没有换行符

display:table-row-group 一个或多个行分组(类似 <tbody>)

display:table-column-group 一个或多个列分组(类似 <colgroup>)

display:table-column 单元格列(类似 <col>)

display:table-row 表格行(类似 <tr>)

display:table-cell 表格单元格(类似 <td>或<th>)

display:table-caption 表格标题(类似 <caption>)

在不方便使用表格的情况下,可以通过这些属性定义将非表格元素模拟为表格,例如:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
h2,h3,h4,h5 {margin:0;padding:10px;font-size:16px;}
h3 {color:red;}
h4 {color:blue;}
#my {display:table;}
h2 {display:table-caption;}
.book {display:table-row;}
h3,h4,h5 {display:table-cell;}
</style>
</head>
<body>
<div id="my">
<h2>我最喜欢的武侠小说</h2>
<div class="book">
 <h3>天龙八部</h3>
 <h4>作者:金庸</h4>
 <h5>故事朝代:北宋哲宗年间</h5>
</div>
<div class="book">
<h3>大唐双龙传</h3>
 <h4>作者:黄易</h4>
 <h5>故事朝代:隋末唐初</h5>
</div>
<div class="book">
 <h3>风云第一刀</h3>
 <h4>作者:古龙</h4>
 <h5>故事朝代:明朝成化年间</h5>
</div>
<div class="book">
 <h3>布衣神相</h3>
 <h4>作者:温瑞安</h4>
 <h5>故事朝代:年代不详</h5>
</div>
</div>
</body>
</html>

这里将原本的一些块元素模拟为表格中的元素,得到下面这样的效果:

display-table用法4.png

当然这里只是为了演示display模拟表格的方式,事实上在展示表格类数据的时候,还是应该用table标签而不是强行的用其他标签去模拟表格。一般都不建议使用table表格来进行网页布局,所以通过CSS模拟表格来进行网页布局是一个好办法,比如下面是一个三列网页布局:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSSAAA TEST DEMO</title>
<style type="text/css">
p {margin:10px;}
.left,.center,.right {display:table-cell;}
.left {background-color:#fb8;width:30%;}
.center {background-color:#9be;width:40%;}
.right {background-color:#5dc;width:30%;}
</style>
</head>
<body>
<div id="my">
 <div class="left">
 <p>郭靖被誉为金庸笔下侠之大者。生性单纯刚直,有民族大义,他巨大的人格力量也感染了他身边的人,带领他们走向正面的人生路。</p>
 </div>
 <div class="center">
 <p>黄蓉是桃花岛主“东邪”黄药师与冯蘅的女儿,精通父亲传授的桃花岛武功、五行八卦阵和奇门遁甲之术。</p>
 </div>
 <div class="right">
 <p>杨康是杨铁心之子,完颜洪烈的养子,杨过之父。最初以“小王爷完颜康”的身份登场,此后虽然知道自己身世,但因迷恋金朝王室的富贵而继续追随完颜洪烈。</p>
 </div>
</div>
</body>
</html>

这里不使用浮动和定位,仅使用display:table-cell就实现的简单的三列布局,而且由于表格单元格有等高的特点,所以使用display:table-cell还顺便实现了等高布局:

table-cell实现多列布局.png

如果需要通过媒体查询制作自适应网页,那么小于指定宽度的时候,只需将“单元格”是display属性改为block就可以切换为单列显示了。 

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.flooren.com.cn/skill/148.html