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布局可以实现一些其他布局比较难实现的场景，如下：

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

<div>
    <span>我是简单的两行文字</span>
</div>

div{
    display:table;
}
span{
    diaplay:table-cell;
    vertical-align: middle;//对其方式为middle
}

display:table
1、table布局除了上面3种常用的值还有以下的

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/
其它文章记不太清楚了…