今天打包章丘互聯(lián)網(wǎng)應(yīng)急指揮的時(shí)候，發(fā)現(xiàn)了一個(gè)問題，大部分樣式都錯(cuò)位了，在本地跑的好好的，怎么打包就錯(cuò)位了呢?然后我打開開發(fā)者工具，發(fā)現(xiàn)原本的css沒變，但是寬度卻變了，為什么會出現(xiàn)這種情況呢？
剛開始學(xué)css的時(shí)候，我記得我的叔叔提過一嘴，css里有兩種盒模型，IE盒模型和標(biāo)準(zhǔn)盒模型，當(dāng)前主流開發(fā)的盒模型都是IE盒模型，也被稱為怪異盒模型，在css3中能夠通過box-sizing屬性來控制使用IE盒模型或標(biāo)準(zhǔn)盒模型。
box-sizing: content-box; /* 標(biāo)準(zhǔn)盒模型（默認(rèn)值） */
box-sizing: border-box; /* 怪異盒模型 */
那么這兩種盒模型有什么區(qū)別呢，給大家看一個(gè)例子。我們這里設(shè)置兩個(gè)完全相同的div，可以看到除了第一個(gè)div多了一個(gè)box-sizing:border-box的屬性外，沒有任何區(qū)別，那么實(shí)際的表現(xiàn)是什么樣子呢？
是的，一樣的css因?yàn)楹心Ｐ筒煌?，視覺上成了一大一小。
為什么呢，這里我們引用一下w3c的圖片：
在 標(biāo)準(zhǔn)盒子模型中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框
的總尺寸。
IE盒子模型中，width 和 height 指的是內(nèi)容區(qū)域+border+padding的寬度和高度。
了解更多css知識點(diǎn)擊這里。
關(guān)鍵詞:
