在CSS中，盒模型（Box Model）是指由盒子組成的模型，這些盒子覆蓋了我們的HTML文檔中的每一個元素。在盒模型中，每個盒子由4個部分組成：內(nèi)容區(qū)（Content）、內(nèi)邊距區(qū)（Padding）、邊框區(qū)（Border）和外邊距區(qū)（Margin）。

在CSS中，我們可以使用兩種不同的盒模型：標(biāo)準(zhǔn)盒模型和怪異盒模型。

標(biāo)準(zhǔn)盒模型

box-sizing: content-box;

在標(biāo)準(zhǔn)盒模型中，盒子的寬度只包含內(nèi)容區(qū)（Content），而不包括內(nèi)邊距區(qū)、邊框區(qū)和外邊距區(qū)。

例如：

.box {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}

在標(biāo)準(zhǔn)盒模型中，盒子的總寬度為：200px (內(nèi)容區(qū)) + 10px x 2 (內(nèi)邊距區(qū)) + 5px x 2 (邊框區(qū)) + 20px x 2 (外邊距區(qū)) = 270px。

怪異盒模型

box-sizing: border-box;

在怪異盒模型（Quirks Mode）中，盒子的寬度包括內(nèi)容區(qū)（Content）、內(nèi)邊距區(qū)和邊框區(qū)，但不包括外邊距區(qū)。

例如：

.box {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
box-sizing: border-box;
}

在怪異盒模型中，盒子的總寬度為：200px (內(nèi)容區(qū) + 內(nèi)邊距區(qū) + 邊框區(qū)) + 20px x 2 (外邊距區(qū)) = 250px。

綜上所述，盒模型是CSS中非常重要的概念，我們可以通過切換盒模型來控制盒子的大小，從而實現(xiàn)各種不同的布局效果。