box-sizing:content-box
设置width：100px属性，只是内容宽度，不包含内边距和边框宽度
box-sizing:border-box
设置width：100px属性，此时100px == 盒子的内边距+边框+内容宽度；如果再给元素设置padding：20px，那么此时内容就会被压缩，内容的宽度就是100px-20px，但是盒子大小还是100px。
div{
height:700px;
float:left;
}
div.left{
width:25%;
background:red;
}
div.cent{
width:50%;
box-sizing:border-box;/*可以改变元素以使其宽度包含填充*/
/* 现在整个元素,包括填充在内,占页面总宽度的50%,所以元素的组合宽度为100%,这全程它们很好地适应于它们的容器.*/
background:yellow;
padding:0 20px;/*加了这个会使盒子内容溢出 但是box-sizing很好的自适应了*/
}
div.right{
width:25%;
background:blue;
}
<div class="left"></div>
<div class="cent"></div>
<div class="right"></div>
