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