前戲
很簡單的概念，沒有理解難點(diǎn)。慣例開場丟圖
什么是盒模型
在html中，每個元素都是一個盒子。因為網(wǎng)頁一般來說都是二維系統(tǒng)，所以可以想象在頁面上觀察到的就是這些盒子的俯視圖。
上文圖中就是一個完整的盒模型。其中的content也就是最中間的那一塊就是盒子中的內(nèi)容；外面border那一圈代表的就是盒壁的厚度，也就是邊框；而邊框到內(nèi)容之間的距離，就被稱作內(nèi)邊距；最后外面那一圈，被稱作外邊距，它可以讓盒子們不會全部擠到一起，而是保持適當(dāng)?shù)拈g距。
也就是說，一個完整的盒模型占據(jù)的寬度實(shí)際是content寬度+左右padding+左右border+左右margin的總長度，而高度則是content高度+上下padding+上下border+上下margin的總長度。
box-sizing
那么在css中，width和height指的是誰的寬度和高度呢。
.box {
width: 200px;
height: 200px;
}
實(shí)際上，直接在css中設(shè)置寬高的話設(shè)置的是content的寬高。。是的，既不是整個盒模型的寬高，也不是盒子的寬高，而是盒子中的內(nèi)容的寬高，也就是說上述代碼只是指定了content的大小為200px*200px，而如果再給這個元素添加padding和border屬性，盒子就會隨著變大。
.box {
padding: 20px;
}
這里為box元素添加了一個20px的內(nèi)邊距，而content的寬高已經(jīng)設(shè)定好不會再變，那么盒子就向上下左右各擴(kuò)展20px的距離充當(dāng)內(nèi)邊距。如果添加邊框則是同理。而如果置了背景、顏色或者圖片，這些樣式將會延伸到padding上。
這就很令人費(fèi)解了，大部分人第一反應(yīng)都應(yīng)該會覺得指定元素的寬高就應(yīng)該是盒子的寬高，尤其在元素?fù)碛斜尘盎蛘哌吙驎r，就更容易產(chǎn)生錯覺。而且當(dāng)需要調(diào)整一個元素的寬度和高度使還需要時刻注意元素的內(nèi)邊距和邊框，讓人十分困擾。
好在現(xiàn)在這個“錯誤”已經(jīng)有了解決方案了，現(xiàn)在只需要給元素添加一個屬性
.box {
box-sizing: border-box;
}
這樣元素的寬高就包含了元素的內(nèi)邊距和邊框。如果再給這個元素指定寬度高度以及內(nèi)邊距，那么這個元素的實(shí)際內(nèi)容區(qū)的寬度就是width-padding-border。這樣就可以更容易地去調(diào)整一個元素的寬高。實(shí)際開發(fā)中可以根據(jù)自己的習(xí)慣選擇不同的盒模型規(guī)范。
外邊距合并
外邊距合并就是當(dāng)兩個垂直邊距相遇時，形成的外邊距不是兩個外邊距的總和，而是兩個外邊距中的較大值。例如元素1外邊距是30px，元素2外邊距是20px，元素2處在元素1下方，那么他們之間的間距就是30px。
三種情況會產(chǎn)生外邊距合并，稍微記一下就好了。
- 相鄰疊加的兩個塊級元素，如果它們的上下邊距相遇，即會產(chǎn)生疊加。
- 塊級元素自身沒有內(nèi)容、內(nèi)邊距、邊框時，它的上下外邊距就會相遇產(chǎn)生疊加。
- 塊級父元素和其第一個/最后一個子元素之間沒有內(nèi)邊距、邊框時，它們的邊距就會相遇產(chǎn)生疊加。
結(jié)語
慣例放MDN文檔。
