css table布局归纳

虽然table布局由于它的一些非语义化、布局代码冗余，以及很差维护改版等缺点被赶出了布局界。可是在css不给力时期，table布局也曾风靡一时，就算如今看来table的一些布局的特性也是很是给力的，而幸亏css也吸收了table布局一些好的特性为己用。让咱们可使用更少、更语义化的标签来模拟table布局，能够跳过table布局的缺点又实现咱们想要的效果，因此咱们首先须要了解table的一些特性以及对应的css属性。

咱们在不居中使用到的也就是table、tr、td的一些特性，因此咱们只须要了解这三个标签的特性就足够了。

table标签（display:table）

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

tr标签（display:table-row）

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

td标签（display:table-cell）

1) td默认继承table的高度，且平分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元素会水平居中

 

参考：https://segmentfault.com/a/1190000007007885