CSS 中有三種常見的盒子模型：content-box (W3C標(biāo)準(zhǔn)盒模型)、border-box (IE盒模型)和padding-box (目前只有 Firefox 支持)。下面簡要介紹一下這三種盒子模型的相應(yīng)特性和使用場(chǎng)合。

1. content-box

content-box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}

content-box 是 W3C 標(biāo)準(zhǔn)盒模型，它的 width 和 height 只包括內(nèi)容的寬度和高度，不包括 padding 和 border。因此，如果我們需要精確控制盒子的尺寸，就需要考慮盒子的 padding 和 border 了。如上述示例代碼所示，如果 width 和 height 分別設(shè)為 200px 和 100px，盒子實(shí)際渲染出來的寬度和高度就是 250px 和 150px，因?yàn)?padding 和 border 會(huì)將內(nèi)容撐大。

2. border-box

border-box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: border-box;
}

border-box 是 IE 盒模型，它的 width 和 height 包括內(nèi)容、padding 和 border 的寬度和高度。對(duì)于需要使用 padding 和 border 的情況，通常會(huì)采用 border-box 盒模型來精確控制盒子的尺寸。需要特別注意的是，使用這種盒模型時(shí)，必須指定 box-sizing: border-box，否則瀏覽器會(huì)采用默認(rèn)的 content-box 盒模型來解析。

3. padding-box

padding-box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
box-sizing: padding-box;
}

padding-box 是目前比較新的盒模型，它的 width 和 height 包括內(nèi)容和 padding 的寬度和高度，但不包括 border。目前，只有 Firefox 支持這種盒模型。如果需要使用這種盒模型，也必須指定 box-sizing: padding-box。