CSS盒子模型（Box Model）

作為css的重點，三大模組之一的盒子模型，這部分無論如何也要精通透徹。在任何乙個網頁當中，都有自己的布局方式，所謂網頁布局方式就是如何把網頁裡面的文字、，很好的排版成美工設計的樣式，這時文字就如同牛奶需要用盒子裝起來，然後可以隨意的擺放它的位置。

來看張圖，體會下盒子模型。

其實, 所有的標籤都會生成乙個矩形框（給它新增乙個背景色就會看到），稱為元素框（element box）,它描述了乙個標籤在網頁布局彙總中所佔位置的大小，因此，每個盒子除了有自己的大小和位置外，hia影響其他盒子的大小和位置。

請看盒子之間的位置關係：

由上面兩張圖看出盒子模型主要包括四部分：

盒子邊框（border）

語法

border:border-width border-style border-color;

邊框樣式：border-style

可以單獨設定給某一邊的邊框：

圓角邊框（border-radius）

語法格式：

/*從左上角開始，順時針排序*/

border-radius: 左上角右上角右下角左下角;

案例：

內邊距（padding）

padding 是指邊框與內容之間的間距。有上內邊距（border-top）、右內邊距（border-right）、下內邊距(border-bottom)、左內邊距(border-left).

注意：padding 後面跟幾個值表示的意思不一樣。

值的個數

外邊距（margin）

margin屬性用於設定外邊距。設定外邊距會在元素之間建立「空白」，這段空白通常不能放置其他內容。

取值順序跟內邊距相同。值的個數也遵循內邊距的規律，請參考上面內邊距的**。

外邊距實現盒子居中

這是外邊距的乙個重要用法。

實現盒子水平居中，需要兩個條件：

必須是塊級元素。

盒子必須指定了寬度。

然後給盒子的左右外邊距都設定為auto,就可使盒子水平居中。

示例：

.header

示例：

css3盒模型

css3中可以通過box-sizing來指定盒模型，content-box和border-box，指定的盒模型不同，計算盒子大小的方式就不同。

兩種情況：

box-sizing:content-box;盒子大小為 width + padding + border content-box:此值為其預設值（見上圖盒子），其讓元素維持w3c的標準box mode

box-sizing: border-box ; 盒子大小為 width 就是說 padding 和 border 是包含到width裡面的

注：上面標註的width指的是css屬性中設定的width:length, content的值會自動調整。

div:first-child

div:last-child

網頁布局離不開盒子模型，而div是最典型的盒子模型，盒子模型必須精通。要多多動手寫**發現規律，做總結，總結過程中思路會更加清晰印象更加深刻。