CSS盒子模型與怪異盒模型
盒子模型（Box Modle）可以用來對元素進行佈局，包括內邊距(
padding)，邊框(border)，外邊距(margin)，和實際內容(content)這幾個部分。
標準盒模型
標準盒模型中盒子的大小是指：content + border + padding + margin。其中width指的是內容區域content的寬度；height指的是內容區域content的高度。下面用一段代碼和圖片來讓說明一個盒子大小的呈現方式。
.box {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 10px solid red;
background-color: #606266;
/*標準盒模型*/
box-sizing: content-box;
}
在chrome裏面調試工具樣式的最下面可以看到一個盒子呈現出的長寬，內邊距(padding)，邊框(border)和外邊距(margin)。鼠標移動到dom上，可以看到盒子實際呈現出的長寬分別爲140px,140px。這是因爲我們的width爲100px,height爲100px,padding上下左右均爲10px,border上下左右均爲10px。所以我們看到的我們盒子的長寬爲140px。由於是塊級元素，實際盒子會獨佔一行，這裏的140px沒有算是margin。標準模式下，最直觀的特點是widith和height的值決定了盒子的內容區域(content)的大小。而盒子實際呈現的大小並不一定是你設置的widith和height的值。因爲還有padding,border,margin等來影響它。
IE怪異盒模型
怪異盒模型中的width指的是內容、邊框、內邊距總的寬度（content + border + padding）;height指的是內容、邊框、內邊距總的高度。
怪異盒模型下盒子的大小=width（content + border + padding） + margin。下面用一段代碼和圖片來讓說明一個盒子大小的呈現方式。
.box {
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 10px solid red;
background-color: #606266;
/*IE盒模型*/
box-sizing: border-box;
}
圖中可以看到，我們設置的widht和height爲100px，那麼盒子實際呈現的大小也爲100px(這裏是width和height的值，沒算margin)。那麼內容區域（可以放文字，div標籤的區域）content的大小爲width - padding - border = 60。
如何切換盒模型
在html頂部加上DOCTYPE聲明，大多數瀏覽器就會默認採用標準盒模型。上面的代碼也可以看出，通過css的屬性box-sizing能改變盒模型。
*{
/*IE盒模型,order和padding計算入width之內*/
box-sizing: border-box;
/*padding計算入width內，不推薦使用，非常老的瀏覽器才支持*/
box-sizing: padding-box;
/*border和padding不計算入width之內*/
box-sizing: content-box;
/*繼承父元素*/
box-sizing: inherit;
}
兼容性
可以看到現代瀏覽器都支持了該屬性。
總結
可以看到，其實上面幾種模型，最終盒子的大小是一樣的，區別在於盒子的widht和height的計算。個人在網頁佈局中，更喜歡使用IE盒模型，因爲該模型下，IE盒模型呈現的widht,height就是我們設置的長寬，這樣我們就不必爲了佈局要減去(border和padding)產生的空間。其實我們也可以發現，用邊框繪(border)制三角形，也是利用了盒模型的原理，點擊查看。
學習如逆水行舟，不進則退，前端技術飛速發展，如果每天不堅持學習，就會跟不上，我會陪着大家，每天堅持推送博文，跟大家一同進步，希望大家能關注我，第一時間收到最新文章。
個人公衆號：
