css3的display:table布局

当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器。
网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。


display:table=>相当于“table”标签;
display:table-row=>相当于“tr”标签;
display:table-cell=>相当于“td”标签;


display:table布局可以实现一些其他布局比较难实现的场景,如下:

css3的display:table布局_第1张图片
要实现这种多行文字居中显示在一个固定大小的容器里面,如果是其他的css布局实现,我们常用的做法还需要用到定位,还要用到transfrom才能完成;但是用display:table布局可以很简单的实现;

<div>
    <span>我是简单的两行文字span>
div>
div{
    display:table;
}
span{
    diaplay:table-cell;
    vertical-align: middle;//对其方式为middle
}

display:table
1、table布局除了上面3种常用的值还有以下的
css3的display:table布局_第2张图片

2、table至少有一个display:table和display:table-cell这个其实是跟html的table一致的,那么使用了table布局之后就可以对应的使用一些table常用的css样式:如border-collapse,text-align 和 vertical-align,border-spacing,caption-side,empty-cells等等;详细的可以参考http://www.w3school.com.cn/css/css_table.asp;

3、table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。

4、设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。


此文并未原创,结合了网上很多的文章,我也不太好写原创自哪…只是当作一个记录…
其中参考了张旭鑫老师的http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/
其它文章记不太清楚了…

你可能感兴趣的:(css,移动开发)