[CSS]關於盒子模型

盒子模型概念

CSS css盒子模型 又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。

外邊距的合併

兩個上下方向相鄰的元素框垂直相遇時，外邊距會合並，合併後的外邊距的高度等於兩個發生合併的外邊距中較高的那個邊距值，如圖：

須要注意的是：只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

box-sizing屬性介紹

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 屬性的值

通常設置爲border-box比較好，符合直覺

瀏覽器間的盒子模型。

（1）ul標籤在Mozilla中默認是有padding值的，而在IE中只有margin有值。

（2）標準盒子模型與IE模型之間的差別：

標準的盒子模型就是上述介紹的那種，而IE模型更像是 box-sizing : border-box; 其內容寬度還包含了border和padding。解決辦法就是：在html模板中加doctype聲明。