<div>方塊布局指的是使用HTML和CSS來創建一個基于塊級元素的網頁布局。通過使用<div>元素以及相應的CSS樣式，我們可以方便地實現各種復雜的頁面布局效果。在下面的幾個代碼案例中，我將詳細介紹如何使用<div>元素和CSS來創建不同的方塊布局。
，我們來看一個簡單的例子，使用<div>元素創建一個基本的方塊布局：

<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.box {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
<br>
    <div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>

在這個例子中，我們使用了CSS的grid布局來創建一個容器（類名為.container），并將它的子元素（類名為.box）排列在網格中。grid-template-columns屬性定義了網格的列數和寬度，這里我們設置每列的寬度都為1fr（等分剩余空間）。grid-gap屬性定義了子元素之間的間距。
接下來，我們來看一個稍微復雜一些的例子，使用<div>元素創建一個響應式的方塊布局：

<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
.box {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
<br>
    <div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>

在這個例子中，我們使用了CSS的repeat()和minmax()函數來創建一個自適應的方塊布局。grid-template-columns屬性的參數設置為repeat(auto-fit, minmax(200px, 1fr))，表示網格的列數根據容器的寬度自動調整，并且每列的寬度保持在200px和1fr之間。這樣，當容器的寬度足夠大時，子元素會自動水平排列，當容器的寬度不夠大時，子元素會自動換行顯示。
最后，我們來看一個使用<div>元素創建垂直居中的方塊布局的例子：

<style>
.container {
display: flex;
justify-content: center;
align-items: center;
}
.box {
background-color: #ccc;
padding: 20px;
text-align: center;
}
</style>
<br>
    <div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>

在這個例子中，我們使用了CSS的flex布局來創建一個垂直居中的方塊布局。container容器的display屬性設置為flex，justify-content屬性設置為center，align-items屬性設置為center，這樣子元素會在垂直和水平方向上都居中顯示。
通過以上這些例子，我們可以看到，使用<div>元素和相應的CSS樣式可以方便地創建各種復雜的方塊布局。只要靈活運用CSS的布局屬性和選擇器，我們就能夠輕松實現各種獨特的網頁布局效果。希望本文能夠幫助到大家對<div>方塊布局的理解和運用。