1.盒子模型主要定義四個區域：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin） 2.border，設置元素的邊框，屬性（邊框三要素）：寬度、樣式、顏色，這也是通常border屬性值的書寫順序（非嚴格要求） 單獨書寫：border-width（寬度，預設3 ...
1.盒子模型主要定義四個區域：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）
2.border，設置元素的邊框，屬性（邊框三要素）：寬度、樣式、顏色，這也是通常border屬性值的書寫順序（非嚴格要求）
單獨書寫：border-width（寬度，預設3px）、border-style（樣式，預設none）、border-color（顏色，預設黑色）
border-style屬性值：dotted（點狀）、solid（實線）、double（雙實線）、dashed（虛線）、無邊框（none）
3.padding，設置元素內容與邊框之間的距離，增加內邊距會擴大元素邊框所占用的區域
書寫格式：padding:value（四邊設置，可多值）、padding-top/right/bottom/left:value（單邊設置），value取值可以為像素、百分比，但不能為負數
4.margin，設置元素邊框外周圍的空白區域，外邊距是透明的
書寫格式：margin:value（四邊設置、可多值）、margin-top/right/bottom/left:value（單邊設置），value取值可以為像素、百分比、auto、負數
外邊距合併，當兩個垂直外邊距相遇時，他們將形成一個外邊距，即外邊距合併
合併後的外邊距的高度等於發生合併的兩個外邊距中高度較大者
兩個塊級元素是包含關係時，要設置被包含元素的相對邊距，需要增加父元素border（邊框）或使用“ overflow：hidden”或“ padding”
外邊距特點：① 塊級元素的垂直相鄰外邊距外邊距會合併，② 行內元素不占上下外邊距，且左右外邊距不會合併，③ 浮動元素的外邊距也不會合併，④ 允許指定負數外邊距值
5.怪異盒子，盒子模型分為兩種，一種是符合W3C規範的標準盒子模型，另一種是IE的盒子模型，也被叫做怪異盒子
IE盒子模型也包括margin、border、padding、content，不過IE盒子模型的寬（width）包含了border和padding
6.box-sizing，該屬性用於指定當前元素使用哪種盒子模型，標準（W3C）或 怪異（IE）
屬性值：
content-box（標準），padding和border不會被包含在width和height內
border-box（怪異），padding和border被包含在width和height內，即元素實際大小隻與width和height有關
7.flexbox，伸縮盒子模型（也叫彈性盒子）
它決定一個盒子在其他盒子中的分佈，以及如何處理可用的空間。
該模型可以輕鬆的創建“自適應”瀏覽器視窗的流動佈局。
傳統盒子模型基於HTML文檔流排列，彈性盒子模型可以規定特定的順序。
通過設置 display屬性值為 flex開啟彈性盒子模型。
設置了彈性盒子模型後，float、clear、vertical-align在 flex中不起作用。
8.flex
基本結構：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS選擇器</title>
<style>
.d0 {
width: 100%;
height: 600px;
background-color: aliceblue;
display: flex;
}
.d1 {flex-grow: 1; background-color: blue;}
.d2 {flex-grow: 2; background-color: aquamarine;}
.d3 {flex-grow: 1; background-color: coral;}
</style>
</head>
<body>
<div class="d0">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
</html>
display:flex，定義外層父容器 d0為彈性佈局，預設為水平佈局
flex-grow:value，該屬性表示當前子項目在父容器中的占比，預設值為0
flex-direction，定義靈活項目的佈局方向，屬性值：row（預設值，靈活項目水平排列）、row-reverse（靈活項目以相反的順序水平排列）
column（靈活項目垂直排列）、column-reverse（靈活項目以相反的順序垂直排列）
justify-content，設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式，使用該屬性之前必須先聲明父元素為彈性盒子
屬性值：flex-start（預設值，子項目位於容器的開頭）、flex-end（子項目位於容器的結尾）、center（子項目位於容器的中心）、
space-between（子項目位於各行之間留有空白的容器內）、space-around（子項目位於各行之前、之間、之後都留有空白的容器內）
align-items，該屬性定義靈活子項目在flex父容器的側軸（縱軸）方向上的對齊方式
屬性值：stretch（預設值，拉伸子項目以適應容器）、center（子項目在容器中心）、flex-start（子項目在容器開頭）、flex-end（子項目在容器末端）、baseline（子項目在容器基線）
