布局神器 box-sizing
页面布局有很多种方式，最传统的表格已经本身的局限性已经甚少用于布局。现在的CSS3中又加入了display:flex来用于布局，但兼容性十分蛋疼。除了这些还有使用calc实时计算的动态布局，同样存在很蛋疼的兼容性问题。唯有box-sizing是最好用的了。
最简单的情况是什么都不需要的，只要让元素拥有一定量的宽度就可以布局。比如
<style>
ul {
width:500px;overflow:hidden;
border:1px solid #CCC;
margin:auto;padding:0px;
}
li {
width:20%;height:100px;
background:#EEE;float:left;
text-align:center;line-height:100px;
}
</style>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>由于LI没有border也没有padding，所以20%的宽度5个就刚好到100%的容器，这就是一个最简单的布局。但是稍复杂点就不行，比如容器宽度不能被5整除的话低版本IE上就会计算错误导致换行。
然后考虑存在border或padding的情况，这时就不能直接使用20%了，因为默认情况下border和padding是width之外的。当然，如果是固定宽度的容器我们可以手动计算内部的绝对宽度，但遇到响应式之类的设计，绝对宽度就需要使用calc来计算。
<style>
ul {
width:500px;overflow:hidden;
margin:auto;padding:0px;
}
li {
width:calc(20% - 2px);height:100px;border:1px solid #CCC;
background:#EEE;float:left;
text-align:center;line-height:100px;
}
</style>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>但即使不考虑IE兼容，calc在Mobile设备上的兼容性也是很蛋疼的，目前最新版的UC手机浏览器就不支持calc，所以这个方法的适用性很弱。这是我们还可以考虑flex布局
<style>
ul {
width:500px;list-style:none;
margin:auto;padding:0px;
display:-webkit-box;
display:-moz-box;
}
li {
-webkit-box-flex:1;
-moz-box-flex:1;
height:100px;
border:1px solid #CCC;background:#EEE;
text-align:center;line-height:100px;
}
</style>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>虽然flex提供了更新版的API，但新版的目前无法在Mobile上兼容，故使用旧版本的API。这样也可以兼容PC上的现代浏览器和一些主流的Mobile浏览器，至于IE的兼容，它还是很不友好的。
最后就是使用box-sizing来解决问题。我们的问题实际上就是padding和border占用了额外的空间，只要它们算入width中即可。于是有
<style>
ul {
width:500px;list-style:none;
margin:auto;padding:0px;
}
li {
box-sizing:border-box;
-moz-box-sizing:border-box;
width:20%;height:100px;float:left;
border:1px solid #CCC;background:#EEE;
text-align:center;line-height:100px;
}
</style>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
这样可以兼容到IE8和主流的Mobile浏览器，我觉得这是目前最实用的布局方式了。
本文作者： Jasmine
本文链接： https://www.jianbaizhan.com/article/411.html
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！