css盒子模型

 盒子模型概述

盒子模型是CSS的基石之一，他指定元素如何顯示以及（在某種程度上）如何交互。頁面上的每一個元素都被看作一個矩形框，這個框由元素的內容、內邊距、邊框和外邊距組成，如圖所示：

　　內邊距，邊框和外邊距都是可選的，默認值爲0，可是不少元素會由用戶代理樣式表（瀏覽器樣式）設置內邊距和外邊距，能夠經過通用選擇器顯式地將內邊距和外邊距設置爲0來覆蓋瀏覽器樣式：

* {
margin: 0;
padding: 0;
}

       

　　內邊距出如今內容區域周圍，若是給元素添加背景，北京會應用於內容和內邊距組成的區域，內邊距一般用於建立一個隔離帶，使內容不會與背景混在一塊兒；邊框會在內邊距的外邊添加一條線，這些線能夠是多種樣式的，如實線，虛線活點線等；在邊框外部的是外邊距，外邊距是透明的，一般使用它控制元素之間的間隔。Width和Height是指內容區域的寬度和高度，當設置margin或padding時，會改變整個元素框的尺寸。

 

    外邊距的疊加

如下狀況僅限於普通元素，非浮動元素。

1. 當兩個或更多垂直外邊距相遇時，他們造成的外邊距並非上面元素的下外邊距和下面元素的上外邊距之和，而是這兩個外邊距中值較大的一個，如圖所示：

2. 當子元素的上外邊距與父元素的上外邊距相遇時，一樣會造成一個值爲較大外邊距值的外邊距，如圖所示：

3. 若是一個元素的內容爲空，則上外邊距和下外邊距也會發生疊加，如圖所示：