标签：
这些天在做一个手机端的页面，遇到了一些问题！首当其冲的就是盒子的溢出问题！大家都知道，手机的尺寸各异，各种型号的手机多得能闪瞎你们的眼睛，为了能 让这些设置更好的浏览我们的页面，我们已经不能固定页面的大小了。所以很多时候我们对于大小的设置都需要使用百分比，嗯，试试看吧！
对于一个导航，我们初始是想这样：
代码如下：
css:
nav{width: 100%;background: #001125;overflow: hidden}nav a{display: block;float: left;width: 20%;height: 60px;color: #FFF;text-align: center;font: 16px/60px Microsoft YaHei;background: #0A92CD}nav a.p1{background: orange}nav a.p2{background: purple}nav a.p3{background: green}nav a.p4{background: blue}nav a.p5{background: gray}
效果如下：
嗯，看起来还是不错的！
但是，很显然，在实际开发过程中总是存在各种“但是”（比如，产品经理对设计师说：这样不好看，我们要背景一致，用竖线把它们分隔开来...由于是乎，设计师就把方案改了~ 结果，前端工程师就屁颠屁颠的改代码）
css:
nav{width: 100%;background: #001125;overflow: hidden}nav a{display: block;float: left;width: 20%;height: 60px;border-right:1px solid #001125;color: #FFF;text-align: center;font: 16px/60px Microsoft YaHei;background: #0A92CD}nav a:last-child{border-right: none}
一段时间后...终于改好了！来看一下效果吧~
“帮助”你为什么没有跟你们兄弟站在一条战线上？
对啊，为什么呢？我翻资料，查找原因...我查...
原来：现代浏览器对于盒模型的解析引起的问题，它们不会将border和padding包含在width之内，所以，这里各自20%的宽度是不包括border-right:1px的，现在元素中20%*5+4px(4个border-right:1px,最后一个被nav a:last-child{border-right: none}去除了)当然就超过了父容器100%的宽度了，所以第一排已经容不下“帮助”了，它不得不孤独的自成一排。
那么，有什么办法可以让它们兄弟重新“团聚”呢？那就是我们今天的主角：box-sizing！只需要，在为所有兄弟设置box-sizing:border-box，就可以让它们合家团圆了！
css:
nav{width: 100%;background: #001125;overflow: hidden}nav a{display: block;float: left;width: 20%;height: 60px;border-right:1px solid #001125;color: #FFF;text-align: center;font: 16px/60px Microsoft YaHei;background: #0A92CD;box-sizing:border-box}nav a:last-child{border-right: none}来看看是不是真的实现了呢？
那是必须的！
IE6以前的版本中，对盒模型的解析其实不需要设置border-box就已经是将border与padding包含在了width之内。所以，IE6以前版本的浏览器，在此前的dome中可能就已经没问题了。在我们开发的过程中会发现，有时候，如果对页面中的大区域进行设置时，将border、padding计算到width和height之内，反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。所以才出现了刚才那样的问题。不过幸亏到了css3中引入了这个box-sizing的新属性，它具有 “content-box”和 “border-box”两个值。
box-sizing:conten-box就是遵从之前CSS2.1的W3C标准，当它定义width和height时，宽度不包括border和padding。
box-sizing:border-box时便是能完美解决问题的包含其中的设置了！
标签：
原文地址：http://www.cnblogs.com/garfieldzhong/p/4655745.html
