CSS 盒模型

        CSS盒模型也叫框模型，具有內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）這些屬性。在CSS中，每個元素都被視爲一個框，而每一個框都有三個屬性：

•   border：元素的邊框（可能不可見），用於將框的邊緣與其餘框分開；

•   margin：外邊距，表示框的邊緣與相鄰框之間的距離；

•   padding：內邊距，表示框內容和邊框之間的空間。

盒模型的結構以下圖所示：

        由上圖能夠看出，width和height指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸。

        元素的佔地尺寸:

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

        元素總高度=上下外邊距 + 上下邊框 + 上下內邊距 + height;

        元素的可視化尺寸(邊框內):

        邊框內寬度=左右邊框+左右內邊距+width;

        邊框內高度=上下邊框+上下內邊距+height;

        所以，若是在一個具備邊框的元素中放置文本，每每須要設置一些內邊距，以便文本的邊緣不要接觸邊框，這樣更便於閱讀，而外邊距則能夠在多個元素之間建立空白，避免這些框都擠在一塊兒。所以，在設計頁面時，常常會使用padding和margin屬性來設置頁面的佈局。可是，必須注意的是，一旦用padding屬性或者margin屬性設置了元素的邊距之後，會增長元素在頁面佈局中所佔的面積。

        如下經常使用元素在頁面中具有默認外邊距，開發中，經過 CSS Reset的方式將默認的外邊距所有都清除：

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,pre{

margin:0;

}

特殊問題：

一、外邊距的合併

當兩個垂直外邊距相遇時，他們將造成一個外邊距，合併後的外邊距值等於兩個元素外邊距中較大的數值。

二、外邊距的溢出

在某些特殊的狀況下，爲子元素設置上外邊距時，有可能會做用到父元素上：

條件：父元素沒有上邊框，第一個子元素被設置了上外邊距。

三、爲行內元素和行內塊元素 設置上下外邊距時：

    行內元素：上下外邊距無效(img除外)；

    行內塊元素：設置上下外邊距時，整行元素都跟着動。

四、爲行內元素和行內塊元素增長上下內邊距時不會影響元素的高度，即對相對其它元素的距離不會所以改變，如a元素。