布局神器 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
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!