display:table、box和width百分比來均分盒子的比較

標籤：box   css   前端開發   

box

box適合均分內部子盒子沒有邊框的父盒子，否則內部盒子的邊框重疊問題不太好處理，另外如果自盒子間有margin值，中間的margin會是兩側的double，這時可通過nth-child(index)來進行個別調整。
box-flex是對除開子盒子內容區、定寬子盒子之外的剩餘部分進行劃分，而不是把父盒子的整個寬度進行劃分，因此就會造成所有子盒子都設定為box-flex：1，但因為子盒子內容多少不一而造成不能均分。

box的特點
1.當父元素設定為display:box後，內部的自盒子無論是否是內嵌元素，預設的排列方向都是橫向排布。
2.內部塊級子盒子的寬度由內容決定，不再佔滿整行，即便是按縱向排布。
3.只有內部盒子中存在區塊層級元素時，父盒子上應用box的相關屬性才有用，如果內部盒子全是內嵌元素將不起作用。子盒子的屬性box-flex只對塊級子盒子起作用。

總結box的應用：
1.實現內部盒子的橫向布局：box-orient:horizontal
2.內部子盒子的置中對齊：box-align:center；box-pack:center
   左右對齊:box-pack:justify
3.子盒子按某種比例劃分父盒子（剩餘部分）寬度：box-flex：num;(仍可設定width)

設定width:百分比

設定子盒子的寬度為百分比通常需要知道父盒子的寬度、除掉子盒子寬度後的地區的寬度，例如margin、border值等，需要精確的計算，這種方式不太方便。通常需要先將子盒子float以實現橫向布局，在使用百分比。或者是父元素寬度不知道，但是子盒子間沒有邊距需要考慮也可以直接使用這種方式均分。

display:table

可以把除了margin等寬度以外的剩餘部分按照100%來劃分，這樣就不用精確的計算了，父盒子的寬度也不必知道；此外利用border-spacing還可以避免設定margin後double的問題，border-collapse:collapse也能避免邊框重疊問題。
但要注意一點的是，table不再是區塊層級元素，不是佔滿整行，寬度和高度都由內容撐開（但是是可以設定width和height的）。可設定其寬度為100%。
對table-cell應用margin值無效。table-cell同樣會被其他一些CSS屬性破壞，例如float, position:absolute，所以，在使用display:table-cell與float:left或是position:absolute 屬性盡量不用同用。
table-cell可以單獨使用，table和table-cell可以兩個搭配使用，可以沒有table-row。

總結table應用：
1.將內部盒子設定為table-cell，可實現橫向排布
2.為內部盒子設定width可實現均分，調適型配置
3.border-collapse可避免border重疊問題
4.border-spacing可避免設定margin值來分離內部盒子造成的邊距double問題。
5.table-cell啟用了vertical-align屬性，可用於垂直置中內部元素
6.實現等高布局

局限：IE8+及現代瀏覽器支援

我所知道的幾種display:table-cell的應用

橫向布局

1.display:inline-block

2.浮動

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

display:table、box和width百分比來均分盒子的比較