CSS之盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用，CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容，盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
不同部分的說明：
- 外邊距（margin）清除邊框外的區域，外邊距是透明的。
- 內邊距（padding）清除內容周圍的區域，內邊距是透明的。
- 邊框 （border）圍繞在內邊距和內容外的邊框。
- 內容區（content）盒子的內容，顯示文本和圖像。
關於邊框大小
設置一個數值的話，上下左右都會以此大小來作爲邊框大小
設置2個數值的話，第一個數值會作爲上下邊框大小，第二個數值會作爲左右的邊框大小
設置3個數值的話，第一個數值會作爲上邊框大小，第二個數值會作爲左右的邊框大小，第三個數值會作爲下邊框大小
設置4個數值的話，4個大小會順時針作爲上右下左的邊框大小
和邊框大小一樣邊框的顏色，內邊距（padding），外邊距（margin）也遵循這樣的規律
細心的同學會發現我上面沒有寫邊框顏色，因爲一般瀏覽器會默認邊框顏色和邊框大小
盒子大小的計算
影響盒子大小的部分：
- 盒子本身大小
- 邊框大小
- 內邊距
盒子高度=內容區高度+上下內邊距+上下邊框大小
盒子寬度=內容區寬度+左右內邊距+左右邊框大小
margin可以爲負值嗎?
margin可以爲負值！
這裏我設置下外邊距爲-50px，下面的div會覆蓋上面的div50個像素
我設置左外邊距爲-50px，黃色的div向左移動了50個px
垂直外邊距的重疊
如果黃色的下外邊距設置100px，綠色上外邊距設置爲100px，他們之間的高度會是200px嗎？正確的答案是100px，如果兩個邊距大小不一樣的話，則兩個之間的距離是那個較大的邊距，而非兩邊距數值的和。（兄弟之間）
如果父子元素相鄰，則子元素的外邊距會給父元素，相當與給父元素設置外邊距（垂直方向上）