CSS中 display的相关属性

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标签元素了。