注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

布局神器 box-sizing  

2014-06-11 16:21:06|  分类: css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 页面布局有很多种方式,最传统的表格已经本身的局限性已经甚少用于布局。现在的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上就会计算错误导致换行。
  然后考虑存在borderpadding的情况,这时就不能直接使用20%了,因为默认情况下borderpaddingwidth之外的。当然,如果是固定宽度的容器我们可以手动计算内部的绝对宽度,但遇到响应式之类的设计,绝对宽度就需要使用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来解决问题。我们的问题实际上就是paddingborder占用了额外的空间,只要它们算入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>
布局神器 box-sizing - sssxiaoliya - 左岸
  这样可以兼容到IE8和主流的Mobile浏览器,我觉得这是目前最实用的布局方式了。
  评论这张
 
阅读(35)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017