<div>布局是一種常用的網頁布局方式，它將網頁分為一系列的盒子，這些盒子可以用來放置各種元素、文字和圖片等內容。使用<div>標簽可以創建這些盒子，并用CSS對其進行樣式設置和布局控制。下面將通過幾個例子來詳細解釋<div>布局的使用方法。

例子一：

<div style="width: 200px; height: 200px; background-color: red;"></div>

在這個例子中，我們創建了一個寬度和高度都為200像素的<div>盒子，并設置其背景顏色為紅色。通過給<div>元素添加樣式屬性，我們可以對盒子的寬度和高度進行設置，同時也可以修改其背景顏色、邊框樣式等。

例子二：

<div style="display: flex; justify-content: center; align-items: center; width: 300px; height: 150px; background-color: yellow;">
<div style="width: 100px; height: 100px; background-color: blue;"></div>
</div>

在這個例子中，我們使用了<div>布局的嵌套。外層<div>盒子使用了flex布局，使得內部的<div>盒子在垂直和水平方向上都居中顯示。內層<div>盒子的寬度和高度分別為100像素，并設置其背景顏色為藍色。通過嵌套和布局的設置，我們可以創建出豐富多樣的頁面布局效果。

例子三：

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;">
<div style="background-color: green;">1</div>
<div style="background-color: yellow;">2</div>
<div style="background-color: blue;">3</div>
<div style="background-color: red;">4</div>
<div style="background-color: orange;">5</div>
<div style="background-color: pink;">6</div>
</div>

在這個例子中，我們使用了grid布局來創建一個具有多列的<div>布局。通過設置grid-template-columns屬性，我們指定了每列都具有相同的寬度（1fr），并且總共有3列。grid-gap屬性用于設置每個<div>盒子之間的間距。通過grid布局，我們可以方便地創建響應式的網頁布局。

：

通過上述例子，我們可以看到<div>布局在網頁設計中的靈活性和實用性。通過樣式設置和布局控制，我們可以輕松地創建出各種復雜的頁面布局效果，滿足不同的設計需求。因此，熟練掌握<div>布局的使用方法，對于開發網頁和設計界面具有重要的意義。