盒模型
就是就是瀏覽器為頁面中的每個 HTML 元素生成的矩形盒子符衔。
每個元素盒子的屬性可以分成三組
1、邊框（border）糟袁，可以設置邊框的寬窄判族、樣式和顏色。
2项戴、內邊距（padding）形帮，可以設置盒子內容區(qū)與邊框的間距。
3周叮、外邊距（margin）辩撑，可以設置盒子與相鄰元素盒子的間距。
一個盒子有 4條邊
因此與邊框仿耽、 內邊距和外邊距相關的屬性也各有 4 個槐臀，分別是上（top）、右（right）氓仲、下（bottom）、 左（left）。
CSS 為邊框敬扛、內邊距和外邊距分別規(guī)定了簡寫屬性
讓你通過一條聲明就可以完成設定晰洒。在每個簡寫聲明中，屬性值的順序都是上啥箭、右谍珊、下、左急侥，想象一下順時針旋轉砌滞。
使用簡寫屬性，則可以簡寫為這樣：
{ margin:5px 10px 12px 8px; }
推薦大家把下面這條規(guī)則作為樣式表的第一條規(guī)則：
* {
margin:0;
padding:0;
}
這條規(guī)則把所有元素默認的外邊距和內邊距都設定為零坏怪。把這條規(guī)則放到樣式表里后贝润，所有默認的外邊距和內邊距都會消失。然后铝宵，你可以為那些真正需要外邊距的元素再添加外邊距打掘。
疊加外邊距
垂直方向上的外邊距會疊加，假設有 3 個段落鹏秋，前后相接尊蚁，而且都應用以 下規(guī)則：
p {
height:50px;
border:1px solid #000;
backgroundcolor:#fff;
margin-top:50px;
margin-bottom:30px;
}
由于第一段的下外邊距與第二段的上外邊距相鄰，你自然會認為它們之間的外邊距是 80 像素（50+30）侣夷，但是你錯啦横朋！它們實際的間距是 50 像素。像這樣上下外邊距相遇時百拓，它們就會相互重疊琴锭，直至一個外邊距碰到另一個元素的邊框。就上面的例 子而言耐版，第二段較寬的上外邊距會碰到第一段的邊框祠够。也就是說，較寬的外邊距決定兩個元素最終離多遠粪牲，沒錯——50 像素古瓤。這個過程就叫外邊距疊加。
注意
疊加的只是垂直外邊距腺阳，水平外邊距不疊加落君。對于水平相鄰的元素，它們的水平間距是相鄰外邊距之和亭引。
