在進行網頁佈局時，我們一定離不開盒模型，接下來開始學習什麼是盒模型？

什麼是盒模型？

css 盒模型（Box Model）,在html中任何一個元素都可以看作盒子，這裡說的盒子與現實不太一樣，css中盒子是二維的，盒子由內到外分四個部分：margin(外邊距)、border(邊框)、padding(內邊距)、content(內容)。css通過margin、border、padding三個屬性來控制盒子，content是html元素的內容。

屬性介紹

1. margin：是盒子的外邊框，包含了上下左右四條邊，開發者可以單獨設定，也可以統一設定。

margin-top：上邊距

margin-right：右邊距

margin-bottom：下邊距

margin-left：左邊距

程式碼示例1：
/*margin屬性後只跟1個值，同時設定四條邊的邊距相等*/
margin:10px;
/*上面的樣式等同於下面的樣式*/
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

程式碼示例2：
/*margin屬性後跟2個值，第一個值設定上下邊距，第二個是設定左右邊距*/
margin:20px 10px;/*上面的樣式等同於下面的樣式*/
margin-top:20px;
margin-right:10px;
margin-bottom:20px;
margin-left:10px;
 

程式碼示例3：
/*margin屬性後跟3個值，第一個值設定上邊距，第二個是設定左右邊距，第三個值設定下邊距*/
margin:20px 50px 10px;
/*上面的樣式等同於下面的樣式*/
margin-top:20px;
margin-right:50px;
margin-bottom:10px;
margin-left:50px;

程式碼示例4：
/*margin屬性後跟4個值，第一個值設定上邊距，第二個是設定右邊距，第三個值設定下邊距，第四個值設定左邊距*/
margin:10px 20px 30px 40px;
/*上面的樣式等同於下面的樣式*/
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
 

2. padding：表示盒子內邊距，與外邊距不同，padding不是隻能完全透明，可以設定背景顏色和圖片。padding也包含了上下左右四個方向邊距，可以單獨設定，也可以簡寫設定，與上面margin類似，可參考margin的4個程式碼例項。

3. border：表示盒子的邊框，允許設定多種樣式和顏色，與margin類似，可以對四個方向邊框分別設定，也可簡寫。

border-top:上邊框

border-right:右邊框

border-bottom:下邊框

border-left:左邊框

設定邊框時，可以分別對邊框的寬度、樣式和顏色進行設定。分別為：

border-width : 邊框寬度

border-style : 邊框樣式

border-color : 邊框顏色

邊框屬性進行簡寫時：border:寬度 樣式 顏色。如：border:5px solid red。

border例項1:
border:5px solid red;
/* 上邊的簡寫相當於下面分別設定 */
border-width:5px;
border-style:solid;
border-color:red;

border-style屬性值及意義：

• none：無邊框
• hidden：與none相同，hidden用於解決邊框衝突。
• solid：實線。
• dashed：虛線。
• double：雙線。
• dotted：點狀邊框。
• groove：定義3D溝槽邊框。
• ridge：3D脊邊框。
• inset：3D嵌入邊框。
• outset：3D突出邊框。

邊框例項2：
/* 邊框使用簡寫時，表示四條邊框的寬度、樣式及顏色完全相同 */
border:2px solid green;
/* 上邊的樣式等同於下面的樣式 */
border-top:2px solid green;
border-right:2px solid green;
border-bottom:2px solid green;
border-left:2px solid green;

邊框例項3：
/* 邊框使用簡寫時，表示四條邊框的寬度、樣式及顏色完全相同 */
border-top:2px solid green;
/* 上邊的樣式等同於下面的樣式 */
border-top-width:2px;
border-top-style:solid;
border-top-color:green;

盒子大小

盒子的大小指的是盒子的寬度和高度。預設情況下width和height屬性只是設定了content部分的寬高，盒子實際的寬和高按下面公式計算：

實際寬度 = width + margin-left + padding-left + border-left + border-right + padding-right + margin-right;

實際高度 = height+ margin-top + padding-top + border-bottom + border-bottom + padding-bottom + margin-bottom;

上邊說的是預設情況下的計算方法，另一種情況下，width、height設定的就是盒子的寬高。盒子的寬高是由box-sizing屬性控制的，box-sizing屬性值：

• content-box：預設值，width，height設定的內容寬高，不包含內外邊距和邊框。
• border-box：設定的width、height包含了邊框和內邊距，真正的元素高度需要減去邊框和內邊距才能得到。
• inherit：繼承父級的box-sizing屬性值。

屬性值為content-box時，這種盒子稱為標準盒子模型，為border-box時，盒子稱為IE盒子模型。