一，盒子模型

CSS盒子模型僅僅是一個形象的比喻, HTML中所有的標籤都是盒子

1. 寬度/高度（width/height） == 指定可以存放內容的區域
2. 內邊距(padding) == 填充物
3. 邊框(border) == 手機盒子自己
4. 外邊距(margin) == 盒子和盒子之間的間隙

二，外邊距：margin

1. 標籤和標籤之間的距離就是外邊距
2. 外邊距的那一部分是沒有背景顏色的
3. 連寫模式
   1. margin:20px 40px 80px 160px;上 右 下 左
   2. margin:20px 40px 80px;上 右 下，左和右都是40
   3. margin:20px 40px;上 右，下和上一樣是20，左和右一樣是40
   4. margin:20px；上，右下左都是20
4. 非連寫模式
   1. margin-top: ;上
   2. margin-right: ;右
   3. margin-bottom: ;下
   4. margin-left: ;左
5. 外邊距合併現象
   1. 在預設佈局的垂直方向上, 預設情況下外邊距是不會疊加的, 會出現合併現象, 誰的外邊距比較大就聽誰的

三，邊框：border

邊框就是環繞在標籤寬度和高度周圍的線條

1. 連寫格式統一設定
   1. border: 5px solid blue；（邊框的寬度 邊框的樣式 邊框的顏色）
   2. border: 5px solid;（連寫格式中顏色屬性可以省略, 省略之後預設就是黑色）
   3. border: 5px blue;（連寫格式中樣式不能省略, 省略之後就看不到邊框了）
   4. border: solid blue;（連寫格式中寬度可以省略, 省略之後還是可以看到邊框）
2. 連寫格式每一邊設定
   1. border-top: 邊框的寬度 邊框的樣式 邊框的顏色;
   2. border-right: 邊框的寬度 邊框的樣式 邊框的顏色;
   3. border-bottom: 邊框的寬度 邊框的樣式 邊框的顏色;
   4. border-left: 邊框的寬度 邊框的樣式 邊框的顏色;
3. 非連寫格式統一設定：
   1. border-width: 5px 10px 15px 20px;
   2. border-style: solid dashed dotted double;
   3. border-color: blue green purple pink;
4. 非連寫格式每一邊設定
   1. border-top-width: 5px;
   2. border-top-style: solid;
   3. border-top-color: blue;

四，內邊距：padding

1. 邊框和內容之間的距離就是內邊距
2. 給標籤設定內邊距之後, 標籤佔有的寬度和高度會發生變化
3. 給標籤設定內邊距之後, 內邊距也會有背景顏色，就是background-color
4. 連寫模式：
   1.  padding:20px 40px 80px 160px;
   2.  padding:20px 40px 80px;
   3.  padding:20px 40px;
   4.  padding:20px
5. 非連寫模式：
   1. padding-top: 20px;
   2. padding-right:40px;
   3. padding-bottom:80px;
   4. padding-left:160px;

五，內容寬高：width/height

//以下兩個選擇器對應的標籤的寬高都是200
  .box9{
            width: 150px;
            height: 150px;
            padding: 25px;
            background-color: red;
        }

   .box10{
            width: 160px;
            height: 160px;
            border: 20px solid #000;
            background-color: deepskyblue;
        }

元素寬度 = 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框

元素空間的寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距

六，box-sizing屬性

box-sizing: content-box,表示width/height,設定的為元素內容的寬高（跟不設定效果一樣）

box-sizing: border-box,表示width/height,設定的為元素的寬高（邊框 + 內邊距 + 內容寬高）

七，注意點

1. 如果兩個盒子是巢狀關係, 那麼設定了裡面一個盒子頂部的外邊距, 外面一個盒子也會被頂下來
2. 如果外面的盒子不想被一起定下來,那麼可以給外面的盒子新增一個邊框屬性
3. 在企業開發中, 一般情況下如果需要控制巢狀關係盒子之間的距離, 應該首先考慮padding, 其次再考慮margin
4. margin本質上是用於控制兄弟關係之間的間隙的
5. 在巢狀關係的盒子中, 我們可以利用margin: 0 auto;的方式來讓裡面的盒子在外面的盒子中水平居中，margin: 0 auto; 只對水平方向有效, 對垂直方向無效
6. text-align:center;和margin:0 auto的區別：text-align: center;作用，設定盒子中儲存的文字/圖片水平居中；margin:0 auto;作用，讓盒子自己水平居中
7. 為什麼要清空預設邊距(外邊距和內邊距)
8. 在企業開發中為了更好的控制盒子的寬高和計算盒子的寬高等等, 所以在企業開發中, 編寫程式碼之前第一件事情就是清空預設的邊距
9. 如何清空預設的邊距
10. 格式*{        margin: 0;            padding: 0;}
11. 萬用字元選擇器會找到(遍歷)當前介面中所有的標籤, 所以效能不好
12. 企業開發中可以從這個網址中拷貝：http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css