在CSS中，有三種不同的盒模型：content-box、border-box和padding-box。它們定義了CSS盒子模型中盒子的大小和邊距的計算方式。

/* content-box */
.box{
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
/* border-box */
.box{
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
/* padding-box */
.box{
box-sizing: padding-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}

首先是content-box，它是默認的盒模型，只有內容的寬度和高度會影響盒子的大小。邊框和內邊距都會增加盒子的總寬度和高度。通過設置盒子的寬度和內邊距，可以計算出盒子的總寬度和高度。

border-box模型下，邊框和內邊距都包含在盒子的總寬度和高度之內，不會增加盒子的總寬度和高度。設置盒子的寬度和內邊距時，可以減去邊框的寬度和內邊距的大小，計算出盒子的內容區域的寬度和高度。

padding-box模型下，只有內邊距的寬度和高度會影響盒子的大小，與content-box類似，邊框不會影響盒子的總寬度和高度。設置盒子的寬度和內邊距時，可以計算出包括內邊距在內的盒子的總寬度和高度。