CSS3盒模型之box-sizing

这些天在做一个手机端的页面，遇到了一些问题！首当其冲的就是盒子的溢出问题！大家都知道，手机的尺寸各异，各种型号的手机多得能闪瞎你们的眼睛，为了能 让这些设置更好的浏览我们的页面，我们已经不能固定页面的大小了。所以很多时候我们对于大小的设置都需要使用百分比，嗯，试试看吧！

对于一个导航，我们初始是想这样：

代码如下：

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:content-box就是遵从之前CSS2.1的W3C标准，当它定义width和height时，宽度不包括border和padding。

box-sizing:border-box时便是能完美解决问题的包含其中的设置了！