CSS盒子布局是Web設計中最重要的基礎，特別是在響應式布局中更是必須掌握。在這里我們將通過一個簡單的例子學習如何使用CSS盒子布局。

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.box {
width: calc(50% - 20px);
margin: 20px;
padding: 20px;
box-sizing: border-box;
float: left;
background-color: #f2f2f2;
}
@media (max-width: 768px) {
.box {
width: 100%;
margin: 10px 0;
}
}

首先，我們創建一個類名為container的DIV元素作為整個布局的容器，并在其中設置了寬度、最大寬度、上下內邊距，以及盒模型的邊框盒模型。接著，我們創建一個類名為box的DIV元素作為內部盒子，并對其進行了浮動、內邊距、良好呈現、寬度等樣式的設置。最后，我們使用媒體查詢來設置在移動設備上盒子的寬度100%，以保證盒子能夠完美適配不同的設備。

上述代碼演示了一個基本的CSS盒子布局方式，你可以嘗試多使用一些樣式和媒體查詢，以達到更加復雜的布局效果，同時也希望你可以更好地掌握CSS盒子布局技能。