前言：
盒子模型是css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面布局。
一、css盒子模型概念
css盒子模型 又稱框模型 (box model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：
圖中最內部的框是元素的實際內容，也就是元素框，緊挨著元素框外部的是內邊距padding，其次是邊框（border），然後最外層是外邊距（margin），整個構成了框模型。通常我們設定的背景顯示區域，就是內容、內邊距、邊框這一塊範圍。而外邊距margin是透明的，不會遮擋周邊的其他元素。
那麼，元素框的總寬度=元素（element）的width padding的左邊距和右邊距的值margin的左邊距和右邊距的值border的左右寬度
元素框的總高度=元素（element）的height padding的上下邊距的值margin的上下邊距的值＋border的上下寬度。
二、css外邊距合併（疊加）
兩個上下方向相鄰的元素框垂直相遇時，外邊距會合併，合併後的外邊距的高度等於兩個發生合併的外邊距中較高的那個邊距值，如圖：
比較容易理解，所以在頁面中有時候遇到實際情況是需要考慮這個因素的。當然外邊距合併其實也有存在的意義，如下圖：
需要注意的是：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。
css reset 中也會經常用到
*三、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 , 規定應從父元素繼承 box-sizing 屬性的值，上海尚學堂web前端原作，請多支援！
關於border-box的使用：
1 乙個box寬度為100%，又想要兩邊有內間距，這時候用就比較好
2 全域性設定 border-box 很好，首先它符合直覺，其次它可以省去一次又一次的加加減減，它還有乙個關鍵作用——讓有邊框的盒子正常使用百分比寬度。
css盒子模型 CSS 盒子模型詳解（一）
在網頁布局中，一定離不開盒子模型這個東西。今天就來說一下這個概念。所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。或者說，每乙個可見的 html 元素都是乙個盒子。每個矩形都由元素的內容 content 內邊距 padding 邊框 b...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css之盒子模型
一 前言 盒子模型，英文即box model。無論是div span 還是a都是盒子。但是，表單元素一律看作是文字，它們並不是盒子。這個很好理解，比如說，一張裡並不能放東西，它自己就是自己的內容。盒子中的區域 乙個盒子中主要的屬性就5個 width height padding border mar...