深入理解CSS盒子模型

在css中浮動、定位和盒子模型，都是很核心的東西，其中盒子模型是css很重要基石之一，感覺還是很有必要把css盒子模型相關知識更新一下......

css盒子模型示意圖

通過css盒子模型示意圖所示，我們知道由內到外內容、填充、邊框、外邊距

組成盒子模型

css盒子模型寬度

a.設定固定寬度的情況下，在盒子模型中，在沒有使用box-sizing情況下，設定的寬度都是內容寬度，不是整個盒子的寬度。看例子如下

盒子模型組成部分：

自身內容：width、height 
寬高內邊距： padding
盒子邊框：border 
邊框線與其他盒子距離：margin外邊距內容+內邊距+邊框+外邊距=面積

而整個盒子模型寬度面積計算是（內容寬度 + border寬度*2 + padding寬度*2 ）之和.

即： 盒子模型寬度 

= 內容的寬度 + 內邊距*2 + 邊框*2 

說明瀏覽器對盒子模型解析存在不一致情況（ie盒子模型與為w3c盒子模型）

在上述案例中為boxmodel類名使用使用屬性名box-sizing屬性值border-box（有關box-sizingbox-sizing重置盒子模型計算規則

這樣就使得設定的width值，變成整個盒子模型寬度，使得在盒子模型寬度面積保持不變的情況下，改變padding內邊距/border邊框值時，內容寬度自動縮小

盒子模型寬度 = 內容的寬度 + 內邊距*2 + 邊框*2  （不包括margin）

css盒子模型外邊距疊加

對於css盒子模型在垂直方向上兩個盒子外邊距相遇時，形成乙個外邊距，這個外邊距的高度等於兩個發生疊加外邊距的高度中的取最大值.

情景一.

垂直方向單純段落標籤並列情況

重置標籤預設外邊距margin值為16px.這裡標籤疊加後的外邊距是16px而不是32px

情景二.垂直方向標籤之間巢狀情況

文字外邊距測試

（body瀏覽器預設外邊距margin是8px ）
這裡垂直外邊距取最大25px,而不是49px哦!!! 當然在水平方向外邊距上是49px
在水平方向上，兩個盒子外邊距是兩盒子外邊距之和
歸納總結  margin外邊距在水平方向外邊距累加; margin垂直方向合併，合併規則大吃小（外邊距大的值吃掉外邊距小的值）
2種盒子模型說明
a.w3c標準盒子模型
標準盒子模型 = 內容的寬度（不包含border+padding）
b.ie盒子模型

ie盒子模型width=padding+border+內容
2種盒子模型說明
出處：【參考資料】
《精通css高階web標準解決方案》（第2版）
《css設計指南》（第三版）
 
深入理解CSS盒子模型
盒模型是css的基石之一，它指定元素如何顯示以及 在某種程度上 如何互動。頁面上每乙個元素都被看做乙個矩形框，框由元素的內容，內邊距 padding 邊框 border 和外邊距 margin 組成，如下圖所示。內邊距出現在內容區域周圍，若給元素上新增背景，背景將會應用於由內容和內邊距組成的區域。新...
深入理解CSS中的盒子模型
很多人對盒子模型搞暈頭了，下面通過乙個簡單的 來分析盒子模型的結構！為了方便方便 在第乙個div中畫了乙個 並將其尺寸設定成與div內容大小一樣！且設定body的margin和padding的屬性都為0px 本例子採用行內css樣式！如下 xml html code複製內容到剪貼簿 把標尺開啟！大家...
CSS 理解盒子模型
什麼是盒子模型？對於初學者來說，很難說出來，但是對於生活中的盒子大家熟悉吧，哈哈，這裡提到的盒子模型你就可以理解成現實生活中的盒子就可以了，不然怎麼能起個名字叫 盒子模型 呢 好！既然和現實生活中的盒子一樣，那我們想一下，生活中的盒子內部是不是空的好用來存放東西，而裡面存放東西的區域我們給他起個名字...