box-sizing属性包括content-box（default），border-box。

1、content-box，border和padding不计算入width之内

2、border-box，border和padding计算入width之内，（竟然是IE盒子模型标准）

注意：ie8+浏览器支持content-box和border-box;

在我们使用了box-sizing：border-box；这一属性之后，你页面所有元素的宽高就会随着你设置的width、height而固定，无论你再怎么折腾padding、border，整个元素的尺寸是不会有任何变化的，只是实际内容content的尺寸会随着被压缩拉伸。这样的整体布局就稳定了许多，而不会因为某一个元素的边框微调而发生崩塌,特别是在我用到这个box-sizing参数后，在调整图片的时候往往会回行。

虽然IE在大家的眼里是一个奇葩的存在，而ie盒模型标准也跟w3c盒模型标准有出入，但笔者个人认为在盒模型上，ie盒模型更加合理化。因为常规的布局思维是我定好整体的宽高之后，里面元素的整体尺寸会确定下来，后面才是考虑这个元素的内边距以及边框，如果我已经确定好了大体的布局，再去微调边框而导致了整体布局的崩塌，这显然是不科学的，所以这也是我极力推崇前端布局使用box-sizing：border;的原因。

然而一个残酷的显示就是IE8 以下的浏览器对css3是不支持的，所以box-sizing：border;属性在ie8以下的浏览器中是无效的，这可能是影响此css元素流行的重大原因，不知道什么时候业内才能同仇敌忾，一起抵制IE8以下浏览器，还我们前端人员一片净土。

如果你的项目不需要考虑ie6/ie7的用户，那么请大胆的使用box-sizing：border;相信它会让你的前端布局灵活很多，记得在css reset（样式重置）的时候就加上它，一劳永逸....