作為一枚前端開發(fā)工程師茸塞，首先一定要清楚盒子模型是什么抵代，因為盒子模型是html+css中最核心的基礎知識攀唯，理解了這個重要的概念才能更好的排版，進行頁面布局媚朦。
一.盒子模型概念
CSS盒子模型 又稱 框模型(Box Model),包含了元素內容(content)氧敢、內邊距(padding)、邊框(border)询张、外邊距(margin)幾個要素孙乖。如下圖所示：
圖中最內部的框是元素的實際內容，也就是元素框份氧，緊挨著元素框外部的是內邊距padding唯袄，其次是邊框(border),然后最外層是外邊距(margin),整個構成了框模型。通常我們設置的背景顯示區(qū)域蜗帜，就是內容恋拷、內邊距、邊框 這一塊范圍厅缺。而外邊距margin是透明的梅掠，不會遮擋周邊的其他元素。
那么店归，
元素框的總寬度 = 元素(element)的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度
元素框的總高度 = 元素(element)的height + padding的上下邊距的值 + margin的上下邊距的值 + border的上下寬度
二.CSS外邊距合并(疊加)
兩個上下方向相鄰的元素框垂直相遇時阎抒，外邊距會合并，合并后的外邊距的高度等于兩個發(fā)生合并的外邊距中較高的那個邊距值消痛，如圖：
比較容易理解且叁，所以在頁面中有時候遇到實際情況是需要考慮這個因素的。當然外邊距合并其實也有存在的意義秩伞，如下圖所示：
需要注意的是：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并逞带。行內框、浮動框或絕對定位之間的外邊距不會合并纱新。
css reset中也會經常用到：
* { margin: 0; padding: 0; }
三.box-sizing屬性介紹
box-sizing屬性是用戶界面屬性里的一種展氓，之所以介紹它，是因為這個屬性跟盒子模型有關脸爱，而且在css reset中有可能會用到它遇汞。
box-sizing:content-box|border-box|inherit;
1.content-box：默認值，可以使設置的寬度和高度應用到元素的內容框。盒子的width只包含內容空入。
即络它， 總寬度 = margin + border + padding + width
2.border-box：設置的width值其實是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內容
即歪赢，總寬度=margin+width
很多CSS框架化戳，都會對盒子模型的計算方法進行簡化。
3.inherit：規(guī)定應從父元素繼承box-sizing屬性的值
關于border-box的使用：
(1)一個box寬度為100%埋凯，又想要兩邊有內間距点楼，這時候用就比較好。
(2)全局設置border-box很好白对，首先它符合直覺盟步，其次它還可以省去一次又一次的加加減減，它還有一個關鍵作用——讓有邊框的盒子正常使用百分比寬度躏结。
四.實際開發(fā)中遇到的和框模型有關的應用以及小問題
1.margin越界 [第一個子元素的margin-top和最后一個子元素的margin-bottom的越界問題]
以第一個子元素的margin-top為例：
當父元素沒有邊框border時，設置第一個子元素的margin-top值的時候狰域，會出現(xiàn)margin-top值加在父元素上的現(xiàn)象媳拴，解決方法有四個：
(1)給父元素加邊框border [副作用]
(2)給父元素設置padding值 [副作用]
(3)父元素添加overflow：hidden [副作用]
(4)父元素加前置內容生成 [推薦]
2.瀏覽器間的盒子模型
(1)ul標簽在Mozilla中默認是有padding值的，而在IE中只有margin有值兆览，
(2)標準盒子模型與IE模型之間的差異：
標準的盒子模型就是上述介紹的那種屈溉，而IE模型更像是box-sizing：border-box;其內容寬度還包含了border和padding。解決辦法就是：在html模板中加doctype聲明抬探。
3.用盒子模型畫三角形
.triangle{ width: 0; height: 0; border-left:100px solid transparent; border-right:100px solid transparent; border-bottom:100px solid pink; } /* 可以設置4個方向的 三角形*/
上班時間整理寫出來子巾，別人看我一直敲鍵盤，^_^ ?(#^.^#)? O(∩_∩)O哈哈~
