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