一、背景
作爲CSS的重點，三大模塊之一的盒子模型，這部分無論如何也要精通透徹。在任何一個網頁當中，都有自己的佈局方式，所謂網頁佈局方式就是如何把網頁裏面的文字、圖片，很好的排版成美工設計的樣式，這時文字圖片就如同牛奶需要用盒子裝起來，然後可以隨意的擺放它的位置。
網頁佈局的本質：把網頁元素（文字、圖片等），放入盒子裏面。並利用CSS擺放盒子的過程就是網頁佈局。就像玩積木，可以隨意的擺放想要的效果。
來看張圖，體會下盒子模型。
其實, 所有的標籤都會生成一個矩形框（給它添加一個背景色就會看到），稱爲元素框（element box）,它描述了一個標籤在網頁佈局彙總中所佔位置的大小，因此，每個盒子除了有自己的大小和位置外，HIA影響其他盒子的大小和位置。
請看盒子之間的位置關係：
由上面兩張圖看出盒子模型主要包括四部分：
- 內容content
- 內邊距padding
- 邊框border
- 外邊距margin
二、下面具體介紹border/padding/margin/content
盒子邊框（border）
語法
border:border-width border-style border-color;
邊框樣式：border-style
- none: 沒有邊框,即忽略所有邊框的寬度(默認值)
- solid:單實線(最常用)
- dashed:虛線
- dotted:點線
- double:雙實線
可以單獨設置給某一邊的邊框：
- 上邊框: border-top: 寬度 樣式 顏色;
- 下邊框: border-bottom: 寬度 樣式 顏色;
- 左邊框: border-left: 寬度 樣式 顏色;
- 右邊框: border-right: 寬度 樣式 顏色;
圓角邊框（border-radius）
語法格式：
/*從左上角開始，順時針排序*/
border-radius: 左上角 右上角 右下角 左下角;
案例：
<style> div{ width:200px; height: 200px; border:1px solid red; } div:first-child{ border-radius:20px; } div:nth-child(2){ border-radius: 10px 40px; } div:nth-child(3){ border-radius: 10px 40px 80px; } div:nth-child(4){ border-radius: 10px 40px 80px 100px; } div:nth-child(5){ border-radius: 50%; } div:nth-child(6){ border-radius: 100px; height:100px; } </style>
內邊距（padding）
padding 是指邊框與內容之間的間距。有上內邊距（border-top）、右內邊距（border-right）、下內邊距(border-bottom)、左內邊距(border-left).
注意：padding 後面跟幾個值表示的意思不一樣。
值的個數
- 1個值 padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素
- 2個值 padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
- 3個值 padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
- 4個值 padding:上內邊距 右內邊距 下內邊距 左內邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針
外邊距（margin）
margin屬性用於設置外邊距。 設置外邊距會在元素之間創建“空白”， 這段空白通常不能放置其他內容。
- margin-top:上外邊距
- margin-right:右外邊距
- margin-bottom:下外邊距
- margin-left:上外邊距
- margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟內邊距相同。值的個數也遵循內邊距的規律，請參考上面內邊距的表格。
外邊距實現盒子居中
這是外邊距的一個重要用法。
實現盒子水平居中，需要兩個條件：
- 必須是塊級元素。
- 盒子必須指定了寬度。
然後給盒子的左右外邊距都設置爲auto,就可使盒子水平居中。
示例：
.header{ width:960px; margin:0 auto;}
示例：
div{
width: 300px;
height: 300px;
margin:30px auto;
padding:20px;
background-color: pink;
border:1px solid #000;
}
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 {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: content-box; /* 就是以前的標準盒模型 w3c */
padding: 10px;
border: 15px solid red;
/* 盒子大小爲 width + padding + border=200+10+10+15+15 content-box:此值爲其默認值，其讓元素維持W3C的標準Box Mode */
}
div:last-child {
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
box-sizing: border-box; /* padding border 不撐開盒子 */
border: 15px solid red;
/* margin: 10px; */
/* 盒子大小爲 width=200 就是說 padding 和 border 是包含到width裏面的 */
}
三、思考總結
網頁佈局離不開盒子模型，而div是最典型的盒子模型，盒子模型必須精通。要多多動手寫代碼發現規律，做總結，總結過程中思路會更加清晰印象更加深刻。
下一篇文章我們來區分行內元素與塊元素的特點。