CSS盒狀模型是大多數CSS佈局與定位的基礎，它以包含4個成分的有界限的盒子來描述網頁中的每個元素。盒狀模型示意圖如下圖所示。
盒子的尺寸=內容尺寸(width+height) + 內邊距(padding) + 邊框粗細(border) + 外邊距(margin)
一、在給元素設置背景時
IE作用域：content + padding
Firefox作用域：content + padding + border
二、border
border-color : red green; 上下爲紅色，左右爲綠色
border-width : 1px 2px 3px; 上邊寬爲1px，左右邊寬爲2px，下邊寬爲3px
border-style : dotted dashed solid double; 上右下左的邊線分別爲：點線、虛線、實線、雙線
三、margin
1、若有兩個上下排列的塊級元素，分別爲第一個塊級元素設置 margin-bottom ，第二個塊級元素設置 margin-top，則兩塊元素之間的距離並不是margin-bottom + margin-top的總和，而是兩者中的較大者，這個現象稱爲margin的“塌陷”現象，也叫外邊距合併。意思是說較小的margin塌陷到了較大的margin中，因此在實際操作中，當修改某些margin值後，頁面效果而無變化的情況時，不要被表象所迷惑.
2、當兩個元素產生父子關係時，即一個元素包含另一個元素時，子塊的 margin 將以父塊的 content 爲參考。當父塊和子塊高度確定，且子塊的高度超過父塊的高度，則IE和Firefox會有兩種完全不同的處理方法：
IE : 會自動擴大父塊，以保持子元素的margin-bottom的空間和父元素自身的padding-bottom的空間
Firefox : 子元素將超出父元素的範圍
從css的標準規範來說，IE的處理方法是不合規範的，雖然此處它可能更符合前端開發人員的初衷，但它的這種方式，本應該由min-height屬性承擔