浅谈CSS table布局的属性

        CSS布局有很多种方法，比较常用的有浮动、定位、flex布局等，这些布局各有各的利弊，各有各的使用场景。除了这几种常见的布局外，曾经在CSS布局界还有一种table布局，虽然因为它的一些非语义化、布局代码冗余，以及不好维护改版等缺点被赶出了布局界，但是table的一些布局的特性也是非常给力的。

 1.display：table（相当于table标签）

        1) table可设置宽高、margin、border、padding等属性。属性值的单位可以使用px，百分比值。
        2) table的宽度默认由内容的宽高撑开，如果table设置了宽度，宽度默认被它里面的td平均分，如果给某一个td设置宽度，那么table剩余的宽度会被其他的td平均分（有点类似flex布局）
        3) 给table设置的高度起到的作用只是min-height的作用，当内容的高度高于设置的高度时，table的高度会被撑高。

2.display：table-row（相当于tr标签）

        1) 给tr设置高度只起到min-height的作用，默认会平分table的高度。
        2) tr中的td默认高度会继承tr的高度，若给任一td设置了高度，其他td的高度也同样变高。适合多列等高布局
        3) 设置宽度、margin、都不起作用

3.display：table-cell（相当于td标签）

        1) td默认继承tr的高度，且平分table的宽度
        2) 若table（display:table）不存在，给td设置的宽高不能用百分比只能用准确的数值
        3) 给td设置vertical-align: middle; td元素里面(除float、position:absolute)所有的块级、非块级元素都会相对于td垂直居中
        4) 给td设置text-align: center; td元素里面所有非block元素(除float、position:absolute)都会相对于td水平居中，虽然block元素不居中，但其中的文字或inline元素会水平居中

了解了table的一些属性，当我们遇到一些水平垂直居中的布局时，就会变得so easy了。