css 盒子模型理解

盒子模型是html+css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面布局。下面是自己積累和總結的關於css盒子模型的知識^_^，希望對初學者有用。

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

關於border-box的使用：

1 乙個box寬度為100%，又想要兩邊有內間距，這時候用就比較好

2 全域性設定 border-box 很好，首先它符合直覺，其次它可以省去一次又一次的加加減減，它還有乙個關鍵作用——讓有邊框的盒子正常使用百分比寬度。

四、實際開發中遇到的和框模型相關的應用及小問題。

1 margin越界（第乙個子元素的margin-top和最後乙個子元素的margin-bottom的越界問題）

以第乙個子元素的margin-top 為例：

當父元素沒有邊框border時，設定第乙個子元素的margin-top值的時候，會出現margin-top值加在父元素上的現象，解決方法有四個：

（1）給父元素加邊框border （***）

（2）給父元素設定padding值（***）

（3）父元素新增 overflow：hidden （***）

（4）父元素加前置內容生成。（推薦）

以第四種方法為例：

.parent .parent : before .child

<
div 
class
="parent"
>
<
div 
class
="child"
>
div>
div>

2 瀏覽器間的盒子模型。

（1）ul標籤在mozilla中預設是有padding值的，而在ie中只有margin有值。

（2）標準盒子模型與ie模型之間的差異：

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

3 用盒子模型畫三角形

doctype html
>
<
html
>
<
head
>
<
style
>
.******** 
style
>
head
>
<
body
>
<
div 
class
="********"
>
div>
body
>
html
>

頁面顯示結果為：