display:table,包括与此相关的一些列display属性值,并不是很新鲜的东西了,在CSS2.1中就已经存在,但是由于IE6/7没有支持这些属性,所以用的人不算多。
虽然作为一个不是很常用的属性值,但是经过几年的锤炼,还是被开发出了很多种应用。
比如,display:table可以较好的解决未知行高的垂直居中问题(较好指的是IE6/7需要额外的处理)。
具体可参考:blueidea的一篇帖子。
此外,display:table可以用来作为一种布局方式。详细请参考支付宝UED的文章。
喜欢用大背景居中来解决窗口背景自适应的同学们估计也会对display:table有所了解。
1 2 3 4 5 | body{
background:#f7eecf url(images/header.jpg) no-repeat center top;
width:100%;
display:table;
} |
这里使用display:table可以解决缩小浏览器窗口时的背景移位问题。
为了更详细地了解这个属性,我们将brunildo中的测试样例搬了过来,感谢brunildo。
display:table
display:table-cell
display:table containing table-cell
display:table, with a box inside having background, padding, border, margin
other content
display:table-cell, with a box inside having background, padding, border, margin
other content
display:table containing table-cell, with a box inside having background, padding, border, margin
other content
display:table, with a box inside having background, padding, border, margin and float:left
other content
like the above but the inner box is not the first child of the table (text before)
after the box
like the above but the inner box is not the first child of the table (empty unstyled span before)
other content
display:table, with a box inside having background, padding, border, margin and width:300px
other content
display:table-cell, with a box inside having background, padding, border, margin and float:left
other content
display:table containing display:table-cell, with a box inside having background, padding, border, margin and float:left
other content
display:table containing display:table-cell, with a box inside having background, padding, border, margin and width:300px
other content
不支持IE7及IE7以下版本的浏览器。测试样例来自:http://www.brunildo.org/test/disptable.html

