DIV CSS 佈局教程網

盒子模型概述

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



內邊距，邊框和外邊距都是可選的，默認值為0，但是很多元素會由用戶代理樣式表（浏覽器樣式）設置內邊距和外邊距，可以通過通用選擇器顯式地將內邊距和外邊距設置為0來覆蓋浏覽器樣式：
* {
margin: 0;
padding: 0;
}

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



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



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


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