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+及現代瀏覽器支援

橫向佈局

1.display:inline-block

2.浮動