咱们都晓得有两种盒模型，w3c 盒模型和 IE 盒模型，IE 是业界毒瘤所以 IE 盒模型又叫怪异盒模型 (好吧我瞎说的)。content-box，顾名思义，即width 就是内容宽度，和边框边距互相独立，反过来 border-box 就是宽度蕴含了 padding 和border，相互影响。
古代浏览器默认的都是 w3c 规范，但 IE 盒模型并非一无是处，甚至很多状况下它会更好用，看看上面这个理论开发中的例子：
如上，一个很常见的设计图，咱们先看到输入框的大小，写上对应的 css：
width: 340px;
height: 40px;而后咱们持续得悉内容文字在其中的内边距，此时咱们再设置这个内边距：
padding: 10px 44px;以上的操作咱们严格依照设计图要求还原元素，然而在 w3c 盒模型中，整个 div 都被撑开了：
此时只须要把它设置为 IE 盒模型，看，它就失常了：
通过这个简略的例子咱们就很容易了解 IE 盒模型：它的宽高一旦设定，除非边框边距曾经超出宽高，否则宽高就是固定的。
这其实是比拟合乎直觉的，设想一个杯子盛满了水，此时加大了杯子的高度，水天然就不是满的了，于是咱们又要往外头加水能力持续盛满水杯。
而对于规范盒模型来说，它则更像是定义了一个“盛满水”的杯子，此时减少杯子高度，它还是会维持其“盛满水”的状态，主动把水调整到盛满杯子为止，而往外头加水的话，它也会为了维持“盛满水”的状态而主动减少水杯的高度。
后者尽管不合乎常理，却有着编程的严谨性，所以反而是前者显得“怪异”。
尽管 w3c 制订了规范盒模型，但在 box-sizing 属性中却还是保留了怪异盒模型，可能就是心愿开发者在不同的场景中适当地使用，前提是如何了解它。
以上就是文章的全部内容，心愿对你有所帮忙！如果感觉文章写的不错，能够点赞珍藏，也欢送关注，我会继续更新更多前端有用的常识与实用技巧，我是茶无味 de 一天，心愿与你独特成长~