今天打包章丘互联网应急指挥的时候，发现了一个问题，大部分样式都错位了，在本地跑的好好的，怎么打包就错位了呢?然后我打开开发者工具，发现原本的css没变，但是宽度却变了，为什么会出现这种情况呢？
刚开始学css的时候，我记得我的叔叔提过一嘴，css里有两种盒模型，IE盒模型和标准盒模型，当前主流开发的盒模型都是IE盒模型，也被称为怪异盒模型，在css3中能够通过box-sizing属性来控制使用IE盒模型或标准盒模型。
box-sizing: content-box; /* 标准盒模型（默认值） */
box-sizing: border-box; /* 怪异盒模型 */
那么这两种盒模型有什么区别呢，给大家看一个例子。我们这里设置两个完全相同的div，可以看到除了第一个div多了一个box-sizing:border-box的属性外，没有任何区别，那么实际的表现是什么样子呢？
是的，一样的css因为盒模型不同，视觉上成了一大一小。
为什么呢，这里我们引用一下w3c的图片：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框
的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
了解更多css知识点击这里。
下一篇： 没有了
