<div>是HTML中最常用的元素之一，用于創建網頁中的各種布局。div是一個容器元素，可以在其中放置其他HTML元素，如文本、圖像、表格等。通過設置div的CSS屬性，我們可以實現不同的布局效果。本文將介紹幾種常見的div布局，并提供相應的代碼案例。
第一種布局是基本的Block布局。在Block布局中，div元素會自動占據一整行，并且在默認情況下會自動換行?？梢酝ㄟ^設置CSS屬性來控制div元素的寬度、高度、和外邊距等。以下是一個示例代碼：

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

在上面的代碼中，通過設置div的寬度為300像素、高度為200像素，背景顏色為黃色，我們創建了一個黃色的方塊。
第二種布局是Inline布局。在Inline布局中，div元素會像文本一樣在一行內顯示，并且不會自動換行。可以通過設置CSS屬性來控制div元素的寬度、高度、和內邊距等。以下是一個示例代碼：

<p><div style="display: inline; width: 100px; height: 50px; background-color: red;"></div></p>

在上面的代碼中，通過設置div的display屬性為inline，寬度為100像素、高度為50像素，背景顏色為紅色，我們創建了一個紅色的長方形。
第三種布局是Flex布局。Flex布局是一種基于彈性盒模型的布局方式，可以實現靈活的自適應布局?？梢酝ㄟ^設置CSS屬性來控制div元素的排列方式、對齊方式、和各個元素的大小等。以下是一個示例代碼：

<p><div style="display: flex; flex-direction: row; justify-content: space-between;">
<div style="width: 100px; height: 50px; background-color: blue;"></div>
<div style="width: 100px; height: 50px; background-color: green;"></div>
<div style="width: 100px; height: 50px; background-color: orange;"></div>
</div></p>

在上面的代碼中，通過設置父div的display屬性為flex，子div的寬度為100像素、高度為50像素，背景顏色分別為藍色、綠色和橙色，我們創建了一個橫向排列的flex布局，子div之間采用了相等的間距。
起來，div幾種布局是網頁設計中常用的布局方式。通過設置div的CSS屬性，我們可以實現不同的布局效果，包括基本的Block布局、Inline布局和靈活的Flex布局。通過結合使用這些布局方式，我們可以實現復雜多樣的網頁設計。希望本文的介紹對你有所幫助！</div>