提起盒子模型，我想無論是對于一個前端資深開發人員還是前端入門開發人員來說都不陌生，這是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
附：詳述padding和margin中的負值