<div>是HTML中的一個標簽，用于創建一個區塊，可以在其中放置其他HTML元素。在CSS中，可以使用div的class或id來定義樣式，從而對div及其內部元素進行自定義樣式和布局。
<div>標簽的語法格式為：

<p><div class="class-name"></p>
<p>內容</p>
<p></div></p>

<div>標簽可以用來創建網頁中的各種版面布局，例如導航欄、頁腳、側邊欄等。下面通過幾個代碼案例來詳細說明<div>標簽和CSS視。
第一個例子是一個簡單的頁面布局：

<p><div class="container"></p>
<p><div class="header">頭部</div></p>
<p><div class="sidebar">側邊欄</div></p>
<p><div class="content">內容</div></p>
<p><div class="footer">頁腳</div></p>
<p></div></p>

在以上代碼中，我們使用了<div>標簽來創建了一個容器，內部包含了頭部、側邊欄、內容和頁腳四個區塊。接下來可以使用CSS樣式來對這些區塊進行個性化的設計。
第二個例子是一個簡單的導航欄示例：

<p><div class="navbar"></p>
<p><ul></p>
<p><li><a href="#">首頁</a></li></p>
<p><li><a href="#">產品介紹</a></li></p>
<p><li><a href="#">聯系我們</a></li></p>
<p></ul></p>
<p></div></p>

在以上代碼中，我們使用了<div>標簽來創建了一個導航欄容器，內部使用無序列表ul和列表項li來創建了三個導航鏈接。我們可以使用CSS樣式來設置導航欄的顏色、字體大小等。
第三個例子是一個圖片展示的網格布局：

<p><div class="grid-container"></p>
<p><div class="grid-item"><img src="image1.jpg" alt="Image 1"></div></p>
<p><div class="grid-item"><img src="image2.jpg" alt="Image 2"></div></p>
<p><div class="grid-item"><img src="image3.jpg" alt="Image 3"></div></p>
<p></div></p>

以上代碼中，我們使用了<div>標簽來創建了一個網格布局容器，內部包括三個grid-item子元素，每個grid-item包含了一張圖片。我們可以使用CSS樣式來定義網格的列數、行高、單元格間距等。
通過以上幾個代碼案例，我們可以看到<div>標簽與CSS視的強大組合。使用<div>標簽可以方便地創建網頁布局，并通過CSS樣式對其進行個性化設計。無論是簡單的頁面布局、導航欄還是圖片展示，我們都可以通過使用<div>和CSS視來實現各種需求。