在CSS中，盒子模型是一個非常關鍵的概念，也是面試中經常出現的考點之一。

盒子模型由四個部分組成：內邊距(padding)、邊框(border)、外邊距(margin)和內容(content)。在CSS中，元素的所有可見部分都是基于盒子模型來計算的。

當我們設置元素的寬度和高度時，實際上是設置的元素的內容(content)部分的尺寸。而內容區域周圍還有內邊距(padding)、邊框(border)和外邊距(margin)組成的區域。

我們可以通過box-sizing屬性來控制元素的盒子模型。默認情況下，box-sizing的值為content-box，即設置的寬度和高度僅包括內容(content)部分。如果我們想要讓設置的寬度和高度包括內邊距(padding)和邊框(border)部分，可以將box-sizing的值設置為border-box。

.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #000;
box-sizing: border-box;
}

上面的代碼中，將box-sizing的值設置為border-box后，元素的實際寬度和高度將包括內邊距(padding)和邊框(border)部分。

在布局時，外邊距(margin)的作用也非常重要。當多個元素緊挨著排列時，我們可以通過設置外邊距(margin)來控制它們之間的距離。

然而，值得注意的是，元素的外邊距(margin)不一定會疊加。當兩個相鄰的元素具有相同方向的外邊距(margin)時，它們之間的外邊距不會疊加，而是取它們中較大的值作為它們之間的距離。如果兩個相鄰的元素具有相反方向的外邊距(margin)，它們之間的外邊距會疊加。

.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 30px;
}

上面的代碼中，.box1和.box2是相鄰的兩個元素，它們之間的距離取它們中較大的外邊距值，即30px。

總的來說，掌握CSS盒子模型的概念和對外邊距(margin)疊加的理解，對于CSS布局和調試都是非常有幫助的。