css3属性box-sizing：border-box⽤法解析及经常使⽤的场景响应式Web设计经常需要我们通过百分⽐设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每⼀列以及总宽度都采⽤百分⽐设置，那这个时候固定的边框⼤⼩就会出来捣乱。下⾯我们将看到⼀组⽅法去解决这个问题，你会学到如何创建⼀个流式布局，⽽不⽤担⼼额外的边框以及内边距。
假设我们需要⼀个五列的布局。我们要考虑的第⼀件事就是外边距（margins）.假设所有的列都需要4%的外边距，我们需要为所有的外边距保留20%（4%*5（5列）=20%）的占宽⽐；然后我们从总宽⽐（100%）⾥⾯减去20%，得到的就是所有列实际占的总宽⽐。所以每⼀列的占宽⽐即16%（80% /5）。下⾯是⼀个详细的图表：
相应的CSS代码如下：margin属性怎么用
.column{
width:16%;
margin: 2% 2%;
float: left;
background: #03a8d2;
}
对应的界⾯是：
当我们给每⼀列添加⼀个2px的边框时，问题出现了，如下图，最后⼀列被挤到下⾯去了。
解决⽅案当然应该是：在之前的计算中我们应该考虑到边框（border），但是我们怎么去做呢？结论是，我们不能⽤百分⽐去设置border 边框的⼤⼩，只能⽤⼀个固定的值。因为如果所有的都使⽤百分⽐设置，那么我们留给border的空间也会是⼀个变化的值，也就是说当页⾯宽度变化时，border的值也会跟着变化，这样是有问题的。这使得我们没有办法去决定我们边框的宽度！
解决⽅案
设置CSS的box-sizing属性值为“border-box”，这样就会把borders和padding全都包含在定义的宽⾼⾥⾯。这就意味着⼀个带有2px 边框的200px的div仍然宽度是200px!!是不是很神奇呢？
.column{
width: 16%;
margin: 2% 2%;
float: left;
background:#03a8d2;
border: 2px solid black;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
即使我们加上padding，也同样可以正常显⽰：
浏览器兼容性问题：
除了IE需要8以上的版本，其他浏览器均可兼容

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。