盒模型（英語：box moldel），是W3C規(guī)定一個瀏覽器如何渲染、顯示一個元素，根據(jù)元素的種類分為塊級元素盒模型和行內(nèi)元素盒模型。

在css中塊級盒子模型也有兩種，分別是標(biāo)準(zhǔn)盒模型和IE瀏覽器的怪異盒模型。默認(rèn)為標(biāo)準(zhǔn)盒模型（box-sizing:content-box），使用box-sizing：border-box可變成怪異盒模型。

box-sizing: inherit;規(guī)定從父元素繼承box-sizing。

• 盒模型組成：

  

• border有多種類型的樣式

• solid：實線

• dashed：虛線

• dotted：原點虛線

• content：內(nèi)容區(qū)

• padding：內(nèi)邊距（其顏色隨著內(nèi)容區(qū)域背景色而變化）

• border：邊框（可以單獨設(shè)置顏色）

• margin（margin不屬于盒子的顯示區(qū)域，它主要體現(xiàn)了盒子的位置）

• 標(biāo)準(zhǔn)盒模型和怪異盒模型的異同點：

1. 標(biāo)準(zhǔn)盒模型的內(nèi)容區(qū)域的寬高就是width和height值，怪異盒模型的內(nèi)容區(qū)域的寬高是width-padding（左右）-border（左右）、height-padding（上下）-border（上下）

2. 標(biāo)準(zhǔn)盒模型添加padding或者border時，整體上所占空間會變大（(width/height)+padding+border）；怪異盒模型添加padding或者border時，其整體所占空間不發(fā)生變化（width和height設(shè)定的大小）

3. 標(biāo)準(zhǔn)盒模型和怪異盒模型的應(yīng)用場景不同（具體根據(jù)實際應(yīng)用場景而定）

// 標(biāo)準(zhǔn)盒模型                                                   // 怪異盒模型
{                                      {
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;
}                              }

效果圖：