布局神器 box-sizing

作者:Dolly - 2016-05-07

页面布局有很多种方式,最传统的表格已经本身的局限性已经甚少用于布局。现在的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浏览器,我觉得这是目前最实用的布局方式了。