CSS盒模型是CSS用來計算元素尺寸和邊距的基礎模型。CSS標準盒模型和怪異盒模型的區別在于如何計算元素的寬度和高度。
標準盒模型(W3C盒模型)：
在標準盒模型中，元素的寬度和高度是指內容區域的寬度和高度，不包括邊框(border)、內邊距(padding)和外邊距(margin)。也就是說，元素的寬度和高度等于內容區域的寬度和高度。可以通過設置box-sizing屬性為content-box來使用標準盒模型。
怪異盒模型(IE盒模型)：
在怪異盒模型中，元素的寬度和高度包括內容區域、內邊距和邊框，但不包括外邊距。也就是說，元素的寬度和高度等于內容區域的寬度和高度加上內邊距和邊框的寬度。可以通過設置box-sizing屬性為border-box來使用怪異盒模型。
例如，對于一個元素的CSS樣式如下：
div {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 20px;
box-sizing: content-box; /* 使用標準盒模型 */
}
在使用標準盒模型的情況下，元素的實際寬度和高度是200px和100px，不包括內邊距、邊框和外邊距。而在使用怪異盒模型的情況下，元素的實際寬度和高度是202px和122px，包括內邊距、邊框和外邊距。
京公網安備 11010802030320號