CSS 盒模型
當我們面對一個頁面的時候，我們可以將它抽象成一塊塊矩形區域，頁面上的每一個文檔元素都佔據了這樣的一個矩形，像是放在一個個矩形的盒子中，從而我們有了盒模型的概念
這篇文章對CSS中的盒子模型進行一個簡單的總結，包括：
- 盒模型的分類
- 寬度和高度
- padding
- margin，margin負值，margin重疊
- border
兩種不同的盒模型
盒模型有兩種常見的形式，標準盒模型和IE盒模型：
- W3C的標準模型：容器的width和height僅僅表示內容區域（上圖中的content）的寬度和高度，增加border、padding和margin都會使元素實際佔據的空間變大
- IE盒模型：容器的width和height僅僅表示所有可見區域，也就是content+padding+border的大小，只有margin不被包含在其中
個人理解：IE盒模型更加符合設計的想法，在還原設計稿件的時候也更加便於計算，並且有一些表單元素仍然是按照IE盒模型進行渲染的
我們也可以通過CSS 手動設置盒模型的類型：
/* IE盒模型 */
#div1{
box-sizing:border-box;
}
/* 標準盒模型 */
#div2{
box-sizing:padding-box;
}
width 和 height
width 和 height 屬性決定了盒子的大小（參見上一小節）
width和height可以取的值有
- length（常用單位：px，em，rem）
- percentage
- auto
- inherit
auto
寬高和margin可以設置auto。對於塊級元素來說，寬度設置爲auto，則會儘可能的寬；高度設置爲auto，則會儘可能的窄
注意： 如果沒有顯式聲明包含塊的height，則元素的百分數高度會重置爲auto
max-width/min-width/max-height/min-height
設置最大最小寬高的好處是可以相對安全地混合使用不同的單位。使用百分數大小的同時，也可以設置基於長度的限制
同時使用這個限制也有助於在不同媒體下的顯示，有助於響應式佈局下的用戶體驗
/* IE盒模型 */
#container{
min-width:960px;
min-height:100%;
}
min-width/min-height 初始值爲0；max-width/max-height 初始值爲none
padding
padding，盒模型的內邊距，常見的使用場景是避免文字或者圖片緊緊貼着容器邊緣
對於行內元素，左內邊距應用到元素的開始處，右內邊距應用到元素的結尾處，垂直內邊距不影響行高，但會影響自身尺寸，加背景顏色可以看出
padding可以直接定義四個方向的內邊距：
#div1{
/* 上下左右 10px */
padding: 10px;
}
#div2{
/* 上下爲 10px 左右 20px*/
padding: 10px 20px;
}
#div3{
/* 上 10px 左右 20px 下 30px*/
padding: 10px 20px 30px;
}
也可以通過 padding-top/right/bottom/left 分別進行設置（一般情況不會這樣做的）
注意： 不管是上下padding還是左右padding，當我們使用百分比設置的時候，都是基於width的：
#div4{
height:200px;
width:100px;
padding: 10% 10%;
/* 你以爲上面的效果等同於：padding:20px 10px; */
/* 並不是，應該是；padding:10px 10px; */
}
所以當我們想要讓元素的大小保持一定的比例，不妨給設置padding的百分比，對於一個空元素，我們設置padding:50%;就可以讓這個元素表現爲正方形
我們也可以利用這一點設置banner在不同寬度下的固定長寬比例：
.banner{
width:100%;
box-sizing:border-box;
border:30% 50%;
background:url('圖片地址');
}
margin
margin，盒模型的外邊距，常見的使用場景是讓一個元素的可見區域和其他元素分開
margin的定義方法和padding相似，也可以一次性設置四個方向的margin，同樣可以分開設置 margin-top/right/bottom/left
margin 的區域是透明的，可以看到父元素的北京等內容
外邊距可以應用到行內元素，上下外邊距對行高沒有任何影響；左外邊距應用到元素開始處；右外邊距應用到元素結束處
注意： margin通過百分比設置的時候同樣是基於寬度的
margin負值
margin和padding的一個非常大的不同點在於 margin可以取負值
當margin取負值的時候可以形成一個視覺上的平移效果，同時對於block、inline、inline-block 的表現略有不同
- block元素可以使用四個方向的margin值
- inline元素使用上下方向的margin值無效
- inline-block使用上下方向的margin負值看會受到
vertical-align的影響
同時，在margin負值的影響下還可能造成元素的重疊
- 兩個block元素重疊時，後面元素可以覆蓋前面元素的背景，但無法覆蓋其內容
- 當兩個inline元素，或兩個line-block元素，或inline與inline-block元素重疊時，後面元素可以覆蓋前面元素的背景和內容
- 當inline元素(或inline-block元素)與block元素重疊時，inline元素(或inline-block元素)覆蓋block元素的背景，而內容的話， 後面的元素覆蓋前面的元素
常見的應用場景有多列布局等
border
元素外邊距內就是元素的邊框border，元素的邊框是圍繞元素內容的內邊距的一條或多條線。邊框由粗細、樣式和顏色三部分組成
border 的樣式由三部分構成：寬度、樣式、顏色，他們用空格分開
#div5{
/* 1px 寬度 實線 黑色 */
border:1px solid #000;
}
同時我們可以使用border-width、border-style、border-color進行分別定義
- 如果要定義單個方向的邊框，可以用
border-top/right/bottom/left來定義，也可以在後面加上width/style/color - border-style的值可以爲solid（實線），dashed（虛線），dotted（點線），double（雙線），groove（凹刻），ridge（浮雕），inset（整體下沉），outset（整體突出）
#div6{
border:1px solid #000;
border-top:3px dashed #333;
border-right-width:2px;
}