display:table、box和width百分比来均分盒子的比较(2)

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.浮动