今天打包章丘互聯網應急指揮的時候，發現了一個問題，大部分樣式都錯位了，在本地跑的好好的，怎么打包就錯位了呢?然后我打開開發者工具，發現原本的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知識點擊這里。
