整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
源 | https://juejin.im/post/59ef72f5f265da4320026f76
.box{ width:200px; height:200px; background-color:pink;}.box{ width:200px; height:200px; background-color:pink; padding:20px;}.box{ width:200px; height:200px; background-color:pink; padding:20px; border:10px solid black;}.box{ width:200px; height:200px; background-color:pink; padding:20px; border:10px solid black; margin-bottom:10px;}.box1{ width: 100px; height: 100px; background: green;}.box{ width:200px; height:200px; background-color:pink; box-sizing:border-box; padding:20px;}言
在前端面試的過程中，CSS盒模型是一道問的頻率非常高的問題。目前網上也有很多解釋CSS盒模型的文章，看了之后自己也總結了下相關知識點，大家一起來看看吧。
感興趣的同學可以加下我自己維護的群624-576-634。
CSS
CSS盒模型-What？
我們首先要了解的一個內容就是，什么是CSS盒模型呢？
簡單點說我們可以把一個HTML頁面看做一個大的方塊，在這個大的方塊里會嵌套很多小方塊（DOM元素），然后小方塊又會嵌套其他的小方塊，這樣一層層的嵌套著就構成了一個盒模型。
既然頁面的結構都是由一系列HTML標簽構成，為什么還會有不同的盒模型呢？
想當年微軟的IE瀏覽器占據超過80%市場份額的時候，覺得自己財大氣粗(是不是有點黑-_-!)，想自己獨立制定一套瀏覽器標準，其中就包括IE的盒模型，但是其他諸如Mozilla，Google等公司不同意IE的做法，他們遵循的是W3C的標準來定制瀏覽器，也就是W3C標準盒模型，因此就造成了現在瀏覽器不同的CSS盒模型了。
接下來我們具體看看IE盒模型和W3C盒模型有什么具體的不同吧。
對比
W3C標準盒模型
元素的width和height屬性只包含內容content部分，不包含內邊距padding和邊框border部分。
IE標準盒模型
元素的width和height屬性同時包含內容content，內邊距padding和邊框border部分，即：
width = content + padding + border
使用
那么我們該如何切換兩種盒模型的展示呢？
在IE8及以下的瀏覽器中只支持IE盒模型，在IE8+及其他主流瀏覽器中，通過CSS新增的box-sizing屬性可以設置瀏覽器的盒模型。box-sizing屬性的默認值是content-box，即W3C標準盒模型；而將box-sizing值設置為border-box時，則會更改為IE盒模型。
接下來我們通過代碼和界面效果來看看兩種盒模型的差異。
效果展示
以下測試都在Chrome瀏覽器中進行。
W3C盒模型
首先定義一個div，有如下CSS屬性。
定義一個div
如上所講，在不設置box-sizing屬性的情況下會采用W3C標準盒模型，在頁面呈現的結果如下所示。
頁面效果
左側是HTML頁面的效果，右側是通過查看瀏覽器的style效果。從中可以看出內容寬度(淺藍色部分)為100px，橫向實際占據的空間為content+padding+border，也就是100px+20px*2+10px*2=160px，乘以2是因為有左右兩個方向。
IE盒模型
同樣的元素我們再看看在IE盒模型下是什么樣的展示。只需要添加box-sizing: border-box;屬性即可。
css樣式
其呈現的效果如下圖所示。
頁面效果
從圖中可以看出，width設為100px，其占據的寬度也就是100px，其中實際內容的寬度只有40px大小(淺藍色部分)，padding-left和padding-right各占20px，border-left和border-right各占10px，因此是40+20*2+10*2=100px。
由以上的例子就可以很明顯的看出IE盒模型和W3C標準盒模型的區別了。
關于margin
不管是在IE盒模型還是W3C標準盒模型中，margin產生的效果是一樣的，都是會占用實際的空間，但是不改變盒子大小。
我們在上面例子的CSS屬性中再加入margin: 30px;
首先看看在IE盒模型下效果圖如下。
IE盒模型
通過上圖可以看出盒子需要占據的空間寬度為100+30*2=160px，而盒子實際寬度仍然為100px。
然后看看在W3C標準和模型下的效果。
W3C盒模型
通過上圖可以看出盒子需要占據的空間寬度為100+20*2+10*2+30*2=220px，而盒子的實際寬度為100+20*2+10*2=160px。
總結
今天這篇文章通過圖例和代碼講解了CSS中兩種不同的盒模型，分別是IE盒模型和W3C標準盒模型，大家都學會了嗎？
解盒模型：CSS3 中的盒模型有以下兩種：標準盒模型、IE盒子模型(怪異盒模型)，盒模型是由4個部分組成，由內向外分別是content(下圖藍色部分)、padding、border、margin盒模型有5個屬性：
一張圖來理解盒模型的5個屬性
父子間間距，通過給父元素設置padding來實現
兄弟間間距，通過給元素設置margin來實現
標準盒模型和 IE盒模型的區別在于設置 width 和 height 屬性時，所對應的范圍不同：
案例展示
<style>
.box {
width: 100px;
height: 150px;
padding: 20px;
border: 10px;
margin: 50px;
box-sizing: border-box;/*怪異地盒子模型*/
}
</style>
<body>
<div class="box"></div>
</body>以上代碼，在未添加box-sizing: border-box;和添加后，兩者渲染后的效果如下
標準盒模型
標準盒模型下的width:100px;height:150px;只包含了content部分,所以content的寬高為100px和150px;
怪異盒模型
width:100px;height:150px;包含了border、padding、content三部分，則通過計算得出content內容區的高為: 150px-20px*2-10px*2=90px寬為：100px -20px*2 -10px*2=40px
盒模型轉換
可以通過修改元素的 box-sizing 屬性來改變元素的盒模型：
你學會了嗎？
為幫助到一部分同學不走彎路，真正達到一線互聯網大廠前端項目研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真實企業項目開發，云服務器部署上線，從入門到精通
共4大完整的項目開發 ！一行一行代碼帶領實踐開發，實際企業開發怎么做我們就是怎么做。從學習一開始就進入工作狀態，省得浪費時間。
從學習一開始就同步使用 Git 進行項目代碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠項目的開發標準和設計規范，命名規范，項目代碼規范，SEO優化規范
從藍湖UI設計稿 到 PC端，移動端，多端響應式開發項目開發
這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視頻+圖文教程+項目資料素材等。只為實力寵粉，真正一次掌握企業項目開發必備技能，不走彎路 ！
過程中【不涉及】任何費用和利益，非誠勿擾 。
如果你沒有添加助理老師微信，可以添加下方微信，說明要參加30天挑戰學習計劃，來自頭條號！老師會邀請你進入學習，并給你發放相關資料
30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的博客-艾編程
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
