HTML盒模型有兩種，分別是標準盒模型（Content Box Model）和IE盒模型（Border Box Model）。
標準盒模型是W3C標準規定的，在標準盒模型中，元素的寬度和高度只包括內容區域（content），不包括邊框（border）和填充（padding）。元素的總寬度或總高度等于 內容區域的寬度或高度 + 邊框的寬度或高度 + 填充的寬度或高度。
IE盒模型是早期Internet Explorer瀏覽器提出的一種盒模型，與標準盒模型不同，IE盒模型中，元素的寬度和高度包括內容區域、邊框和填充。元素的總寬度或總高度等于 內容區域的寬度或高度（包括邊框和填充）。
下面，我將分別給出標準盒模型和IE盒模型的具體代碼示例。
首先是標準盒模型的代碼示例：
.box {
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}
This is the content of the box.
登錄后復制
上面的例子中，我們使用了一個元素來創建一個盒子。通過設置CSS樣式，我們給盒子指定了寬度、高度、邊框、填充和外邊距。在標準盒模型中，元素的總寬度=內容區域的寬度 + 邊框的寬度 + 填充的寬度 = 200px + 2px + 20px = 222px；總高度=內容區域的高度 + 邊框的高度 + 填充的高度 = 100px + 2px + 20px = 122px。
接下來是IE盒模型的代碼示例：
.box {
box-sizing: border-box;
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}
This is the content of the box.
登錄后復制
在IE盒模型中，我們可以通過設置box-sizing: border-box;來使用IE盒模型。在IE盒模型中，元素的總寬度=內容區域的寬度 = 200px；總高度=內容區域的高度 = 100px。
通過上述代碼示例，我們可以清楚地看到標準盒模型和IE盒模型的區別。在實際開發中，我們需要根據不同的需求和瀏覽器兼容性選擇使用哪種盒模型。
