<div>標簽是HTML中的一個無語義的容器，可以用來組織和分割網頁中的不同內容。而使用CSS來控制<div>標簽的樣式，就可以實現網頁布局的效果。在CSS中，我們可以通過設置<div>標簽的樣式屬性來控制其在網頁中的位置、尺寸、邊框等屬性，從而實現各種不同的布局方式。
在下面的幾個代碼案例中，我們將使用<div>和CSS來實現不同的布局效果，以幫助大家更好地理解和應用這個知識。是一個簡單的例子，我們來實現一個居中顯示的頁面布局。

<style>
.container {
width: 300px;
height: 200px;
background-color: #e8e8e8;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<br>
<div>
<div class="container">
<p>居中顯示的內容</p>
</div>
</div>

以上代碼中，我們定義了一個名為.container的CSS類，通過設置該類的width、height和background-color屬性，來確定容器的尺寸和背景顏色。接著使用margin屬性將容器在頁面居中顯示。為了實現內容居中顯示，我們使用了flex布局，通過設置display為flex，并結合justify-content和align-items屬性，將內容水平和垂直居中。
另一個常見的布局需求是實現一個兩欄布局，其中左欄寬度固定，右欄寬度自適應剩余空間。下面的代碼示例演示了如何實現這樣的布局效果。

<style>
.container {
display: flex;
}
.left {
width: 200px;
background-color: #e8e8e8;
}
.right {
flex-grow: 1;
background-color: #f6f6f6;
}
</style>
<br>
<div class="container">
<div class="left">
<p>左欄內容</p>
</div>
<div class="right">
<p>右欄內容</p>
</div>
</div>

在以上代碼中，我們定義了一個名為.container的CSS類，并將其設置為flex布局。左欄和右欄分別定義了.left和.right的CSS類。通過設置.left的寬度為200px，實現了左欄的寬度固定。而右欄則通過設置.flex-grow為1，表示其會自動填充剩余空間。這樣就實現了一個簡單的兩欄布局。
除了使用flex布局，我們還可以使用grid布局來實現復雜的網頁布局效果。下面是一個使用grid布局實現的三欄布局的代碼示例。

<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 10px;
}
.item {
background-color: #e8e8e8;
padding: 10px;
}
</style>
<br>
<div class="container">
<div class="item">
<p>左側欄內容</p>
</div>
<div class="item">
<p>中間欄內容</p>
</div>
<div class="item">
<p>右側欄內容</p>
</div>
</div>

在上述代碼中，我們將.container設置為grid布局，并通過grid-template-columns屬性指定了三個欄目的寬度比例，其中1fr表示等比例分配剩余空間。通過設置grid-gap屬性，可以定義欄目之間的間距。在.item的CSS類中設置背景顏色和內邊距，實現欄目樣式。
以上就是關于<div>標簽和CSS布局的一些簡單示例。通過靈活運用<div>和CSS，我們可以實現各種不同的網頁布局效果，滿足不同需求。同時，通過熟練掌握布局知識，我們也可以提升網頁的可讀性和用戶體驗。希望以上內容能對大家有所幫助！</div>