提起盒子模型，我想無論是對於一個前端資深開發人員還是前端入門開發人員來說都不陌生，這是CSS最基礎的知識。
但是慚愧地說，我之前理解的盒子模型，只是文字上的理解。我知道定義一個元素的寬度和高度時，設定的僅僅是內容（content）區域，也知道內邊距、外邊距、邊框，但是都沒有動手嘗試過…之前沒想著好好學習前端，總覺得這不是很簡單的東西麼，能用、能將樣式調成自己想要的就行了，但是最近開始學習前端之後，才發現自己以前對很多東西的理解都不夠全面，對很多東西都一知半解。即使是一個簡單的盒子模型，當問出一些問題時，我都沒法給出準確的答案，比如background-color作用哪幾部分？padding和margin具體能做到什麼樣的效果？標準盒模型和IE盒模型？等等等等，每次都是嘗試著來，最終怎麼達到的效果，可能都沒那麼清楚，到了下次還是繼續嘗試…
於是，我打算系統的學習和整理一下盒子模型的相關知識，並進行自我反思，好記性不如爛筆頭，以後要多做多練啊！！！
一、什麼是盒子模型
CSS盒模型本質上是一個盒子，模型定義了盒的每個部分，包括：外邊距、邊框、內邊距、實際內容 —— 這些合在一起就變成了我們在頁面上看到的內容。（完整的CSS盒模型應用於塊級盒子，而內聯盒子只使用盒模型中定義的部分內容。）
- Content box：內容區域，如下圖中的藍色部分。
- Padding box：內邊距，內容區域外部的空白區域，如下圖中的綠色部分。
- Border box：邊框，包裹內容和內邊距，如下圖中的黃色部分。
- Margin box：外邊距，是盒子和其它元素之間的空白區域，如下圖中的橙色部分。
二、標準盒模型
標準盒模型就是：當我們設定 width 和 height 時，實際上設定的只是 content box 的寬高。而整個盒子的寬/高 = content + padding + border。margin不計入實際大小（margin只是影響盒子的外部空間，盒子的真實範圍是到邊框為止的）
如下圖所示：
<div id = 'container'></div> <style> #container { height: 200px; width: 400px; padding: 100px; margin: 100px; border: 5px solid; background-color: aquamarine; } </style>
圖一：整個盒子模型
圖二：網頁顯示效果
由圖，我們可以回答之前提到的幾個問題了
1. background-color作用哪幾部分？
content 和 padding
2. padding和margin具體能做到什麼樣的效果？.
- padding是內邊距，也就是邊框以內，內容周圍的邊距。如果設定background-color的話，則 background-color 包含 padding 部分。
- margin是外邊距，也就是邊框外的邊距，也可以理解為盒子模型與其它元素的邊距。
三、IE盒模型
IE盒模型是：當我們設定高度和寬度時，包含 content、padding、border，即所有可見的部分。此時，如果我們想要得到內容寬度，就需要用寬度減去邊框和內邊距寬度。
預設瀏覽器使用的是標準模型，可以通過設定 box-sizing: border-box 來轉換成IE盒模型。
如下圖所示：減去border和padding後，content的寬高為290x90。
<div id='container'></div>
#container {
height: 200px;
width: 400px;
padding: 100px;
margin: 100px;
border: 5px solid;
background-color: aquamarine;
box-sizing: border-box;
}
三、border
使用方式
- 使用border為一個框的四個邊設定邊框 / 或者只設定盒子的一個邊
.box {
border: 1px solid black; //設定四個邊
// border-top: 1px solid black; // 設定一個邊
}
這些簡寫相當於：
.box {
border-width: 1px;
border-style: solid;
border-color: black;
}
或
.box {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
}
- 注意：border: 1px solid black; 中，border-style必須設定。大小和顏色可設可不設，如果不設定的話，大小預設是medium，顏色預設黑色。（因為border-style的預設值是none，所以必須設定border-style）
（關於border-width、border-color、border-style具體的屬性值在此就不多贅述了）
四、margin
margin為給定元素設定四個方向的外邊距屬性，控制的是元素外部空出的空間。
1. 基本語法
margin： 1px; 1個值 ——> 四個邊
margin： 1px 0; 2個值 ——> 上下 | 左右
margin： 1px 5% 1px; 3個值 ——> 上 | 左右 | 下
margin： 1px auto 1em 0; 4個值 ——> 上 | 右 | 下 | 左（逆時針順序）
2. 取值
長度：固定值，如1px，1em等等。
百分比：相對於其最近的祖先的寬度，以百分比值為外邊距。
auto：讓瀏覽器自己選擇一個合適的外邊距。（可用於讓塊元素居中）
3. 外邊距塌陷
css2.1盒模型中規定：所有毗鄰的兩個或更多盒元素的margin將會合併為一個margin共享之。毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容、Padding或Border分隔。
（1）對於同級相鄰的盒元素來說，呈現出來的效果是，上下兩個盒元素之間的距離是這兩個盒元素的margin較大的那個值，而不是兩個盒元素的margin相加。如下段程式碼所示：
<body>
<div class="top">top</div>
<div class="bottom">bottom</div>
</body>
<style>
.top {
height: 200px;
width: 200px;
margin: 50px;
background-color: aquamarine;
}
.bottom {
height: 200px;
width: 200px;
margin: 100px 50px;
background-color: rgb(240, 178, 178);
}
</style>
（2） 對於巢狀的盒元素，子元素的margin-top會影響父元素。其效果為，如果父元素沒有設定margin-top，子元素設定了，那麼子元素沒有出現上外邊距的效果，反而父元素出現了上外邊距的效果。如圖：
<body>
<div class="container">
<div class="block">block</div>
</div>
</body>
<style>
.container {
height: 500px;
background-color: rgb(212, 245, 234);
}
.block {
height: 200px;
width: 200px;
margin: 50px;
background-color: rgb(240, 178, 178);
}
</style>
如果父元素設定了margin-top，子元素也設定了，則父元素的margin-top值是兩者較大的那個（在此就不放圖了，感興趣的可以去試一試）。
解決辦法：
- 父級設定overflow:hidden
- 絕對定位absolute
- 父級設定padding或者border
五、padding
padding是設定元素的內邊距，即內容與邊框之間的空間。
基本語法同margin
取值沒有auto，其它同margin