標準盒模型和怪異(ie)盒模型的對比

盒模型（英語：box moldel），是W3C規定一個瀏覽器如何渲染、顯示一個元素，根據元素的種類分爲塊級元素盒模型和行內元素盒模型。

在css中塊級盒子模型也有兩種，分別是標準盒模型和IE瀏覽器的怪異盒模型。默認爲標準盒模型（box-sizing:content-box），使用box-sizing：border-box可變成怪異盒模型。

box-sizing: inherit;規定從父元素繼承box-sizing。

• 盒模型組成：

  • content：內容區

  • padding：內邊距（其顏色隨着內容區域背景色而變化）

  • border：邊框（能夠單獨設置顏色）

    • border有多種類型的樣式
      • solid：實線
      • dashed：虛線
      • dotted：原點虛線

  • margin（margin不屬於盒子的顯示區域，它主要體現了盒子的位置）

• 標準盒模型和怪異盒模型的異同點：

  1. 標準盒模型的內容區域的寬高就是width和height值，怪異盒模型的內容區域的寬高是width-padding（左右）-border（左右）、height-padding（上下）-border（上下）
  2. 標準盒模型添加padding或者border時，總體上所佔空間會變大（(width/height)+padding+border）；怪異盒模型添加padding或者border時，其總體所佔空間不發生變化（width和height設定的大小）
  3. 標準盒模型和怪異盒模型的應用場景不一樣（具體根據實際應用場景而定）

---

// 標準盒模型                     		                              // 怪異盒模型
{					                                      {
	width: 200px;				                                    box-sizing: border-box;
	height: 200px;				                                    width: 200px;
	margin: 100px 0;			                                    height: 200px;
	padding: 10px;				                                    margin-top: 100px;
	border: 10px dotted green;		                                    padding: 10px;
	background-color: orange;		                                    border: 10px dashed green;
						                                    background-color: purple;
}						                              }

效果圖：