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屬性承擔
css盒狀模型定位
css盒狀模型用於描述乙個為html元素形成的矩形盒，盒狀模型為各個元素調整外邊距 邊框 內邊距和內容的具體操作。css盒狀模型 body model model1 model2 model3 width設定盒狀模型的內容的寬度，height設定盒狀模型中內容的高度。如上述body盒狀模型內容的寬度...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
CSS 盒模型和怪異盒模型
盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...