快来看下CSS3的最新功能吧——box-sizing！是不是有时候会遇到这样的问题？给div设置百分比宽度，再加点填充或外边距，结果父元素被挡住了，看着真不爽。现在，咱就来讲讲咋子解决这个烦人的问题
让我来给你简单地解释一下box-sizing这个概念！首先，我们要聊聊content-box，这是在CSS2.1里头对宽度和高度的规定，也就是说，只有底部元素的内容区才被视为衡量的标准，内边距和边框根本不会影响到它！不过你可能会有点懵，没关系，咱们慢慢来理解。
<pre class="brush:css;”>box-sizing: content-box|border-box|inherit;
来啦来，再告诉你个小秘密——border-box这玩意儿真的超神奇！咱们可得好好研究一下。有了这法宝，不管你怎么加边距边框，都不会让盒子的尺寸超过原始设定。所以说，只要把初始设置里所有的边框和内边距全都去掉，就能轻而易举地知道小盒子到底能装啥了！这回明白了？
大家伙儿是不是还有点懵？实际上Box-sizing里头还有个牛人叫做inherit，这哥们能直接把老爸的box-sizing属性拷贝给你的元素用上。简单来说，他家里有的，你也都有，别跟我客气
今儿学的那些CSS小技巧你们都记下来了吗？告诉你们，给CSS样式加上”box-sizing”有多么顺手哟~要是遇到DIV的宽度被padding或margin挤出去的问题，不妨试试换个border-box看看。只需要拿宽度和高度减掉边框和内边距，就能知道剩余的空间有多少了~
这个真的挺关键的没错？说那么多，其实就是超级紧急的事！无论你干啥，就算是学习或者工作也避免不了遇到排版麻烦。搞不好的话，那个页面简直丑到无法直视，严重影响我们的阅读感受呐！
搞定这个小事儿？没难度！直接动动手去调下“box-sizing”的数值，随你喜欢就好~不过别忘了，关键时刻要瞅一眼Border Box的表现！添个边框和内间距，然后适当地缩小点儿，真实内容的宽度就立马出现了！
太阳就要落了今天的“白话”教程先说到这里！不知道你们听懂了没？有啥事儿别客气，随时问我！下次再见！别忘了分享出去说点儿你可能不知道的：CSS3里的new技巧box-sizing太神奇了！用border-box这个东西，div的宽就能到100%，哪怕加个内边距或者外边距也不会影响父元素的大小。这对我们搞编程、设计项目真的很有益处，还能直接提升网站颜值和用户体验呐！下次记得要用border-box，去掉边框和内边距，这样才能得到准确的宽高尺寸想聊聊天儿的话，随时在下方留言或者私信我下次再跟你们唠嗑！
div.container
{
width:100%;
border:1em solid;
padding:15px;
box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
float:left;
padding:15px;
}
这个 div 占据左半部分。
评论0