前端ABC盒子模型Box model是分为两种
第一种是W3C的标准模型，另一种是IE的传统模型（ie6及以下）
传统型就是盒子的大小不变，padding及border的大小会压缩盒子里内容的空间。
如：div大小为200，如果padding＝10，则盒内img大小为190；
标准型就是盒子里内容的空间大小不变，padding及border的大小会增加盒子的大小。
如：div大小为200，如果padding＝10，则盒内img不变为200，盒子大小变为200+2*10。
IE7以上及其他现代浏览器默认为W3C的标准模型。
因此如果ie7以上使用默认的W3C的标准模型则不需要处理兼容问题。但是缺点时容易打乱布局。
例如：一开始设计子元素宽度加起来刚好与父元素的是相等，
那么我们现在来变动一下，如果根据设计需要，每个块中内容都离边缘有10px的距离。就会讲原来好的布局打乱。
因此就布局方面来讲，传统模型更适合，因为不会改变盒子大小。
现在需要引入CSS3的Box-sizing属性来改变盒模型。
box-sizing : content-box || border-box || inherit
取值说明
1、content-box:此值为其默认值，其让元素维持W3C的标准Box Model
2、border-box:此值让元素维持IE传统的Box Model（IE6以下版本）
box-sizing在这两方面的运用：
一、box-sizing拯救我们的布局
通过box-sizing:border-box改变了Box Model后解决上面提到的打乱布局的问题
二、Box-sizing统一form元素风格
注意：IE6和IE7不支持，如果为了达到一致的效果，需要写CSS Hack，改变宽度高度
欢迎分享本文，转载请保留出处：前端ABC » 浏览器CSS盒子模型理解