本文主要是介绍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.p 1 { background : orange}
nav a.p 2 { background : purple }
nav a.p 3 { background : green }
nav a.p 4 { background : blue }
nav a.p 5 { 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时便是能完美解决问题的包含其中的设置了！
这篇关于CSS3盒模型之box-sizing的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
