box-sizing的细致用法

通常我们使用width:100%给一个div限制宽度后，再使用border-right:1px solid #eee;后

即使给div加上了float:left; width:50%;

也不能让两个相同的div并列（如下图：）

我们已经看到了效果，那么为什么这样的写法不可以让两个宽度为50%的div并列呢？

相信有点工作经验的小伙伴们已经早就发现了症结所在，

对滴，正是div的border:1px;影响了布局

50%+50%+1px+1px+1px+1px>100%;

正是因为超出了父容器的100%才导致了问题所在。

那么也有小伙伴认为父容器可以不限制为100%，就不会出现此类情况，

但是亲们有没有仔细的考虑过，在父容器没有限制宽度的情况下，div是可以无限右浮的，

即使我们可以每隔两个div加上一个clear:both用以清除浮动，且不论这样的写法有没有违背常规，

抛开这点不谈，他还有这另一个致命的问题，

那就是多出的4px会致使屏幕可以左右翻动，

在移动设备上，即使只是2px的翻动也会令用户觉得不舒服，

言归正传，那么我是如何解决的呢？

只需要在div样式中加入box-sizing:border-box;这条样式就可以轻松解决，来看看效果

上图证明css3中出台的box-sizing:border-box;是好样的

现在让我们好好的认识一下box-sizing 属性

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

意思是什么呢？

说明只要在在元素样式内加入这一条，不论你的padding,border有多么牛叉，元素的宽高数值也不会撑破，它只会牺牲元素内部的空间。

这么说大家可能仍有些不明白

上两个图：

/********************************没加box-sizing属性前*****************************************************/

/********************************加了box-sizing属性后*****************************************************/

好了，说道这里我想贡献的也贡献完了，运用到你们项目中去，慢慢你们就能发现box-sizing属性的强大之处，

第一次写博客，只是抱着玩玩的心态，大家可以工作之余和我多聊聊，QQ：1098654043（小鱼）

转载请自觉注明出处@不羁的狂鱼-喻文强，谢谢