我们都知道盒子模型有两种，w3c盒子模型和IE盒子模型。IE是业界的毒瘤，所以IE盒子模型也被称为怪盒模型（好吧，我在胡说八道）。content-box，顾名思义，即width是内容的宽度，与边框边距无关。反之，border-box表示宽度包括padding和border，两者相互影响。现代浏览器默认采用w3c标准，但IE盒子模型也不是没有用，在很多情况下甚至更有用。看看下面这个实际开发中的例子：如上，一个很常见的设计图，我们首先看到输入框的大小，写上对应的css：width:340px；高度：40px；然后我们继续知道内容文本的内边距，然后设置内边距：padding:10px44px;上面的操作我们严格按照设计图的要求还原元素，但是在w3c的盒子模型中，整个div都被拉伸了：这时候我们只需要设置为IE盒子模型，看看，是normal：通过这个简单的例子我们很容易理解IE盒子模型：一旦设置了它的宽高，除非bordermargin超过宽高，否则宽高是固定的。这其实更直观。想象一个装满水的杯子。这时候如果把杯子的高度加高，水自然就装不满了，所以我们要加水继续往杯子里注水。对于标准的盒子模型，更像是定义一个“装满水”的杯子。此时，增加杯子的高度仍会保持其“满水”状态，并自动将水调至满。如果向杯子中加水，它会自动增加杯子的高度以保持“全水”状态。后者虽然不合理，但是却有编程的严谨性，所以显得“怪异”的是前者。w3c虽然制定了标准的盒模型，但是在box-sizing属性中还是保留了怪异的盒模型。可能希望开发者能够在不同的场景下适当的使用它，前提是如何去理解它。以上就是文章的全部内容，希望对大家有所帮助！觉得文章写得好，可以点赞收藏。也欢迎您关注。我会持续更新更多有用的前端知识和实用技巧。一日茶无味，愿与你共同成长~
