<div> 是 HTML 中的一個重要元素，用于定義一個塊級容器。我們可以通過 CSS 來對 <div> 元素進行樣式化，使其呈現出我們想要的外觀和布局。CSS 的樣式規則可以應用于 <div> 元素內部的內容，也可以應用于 <div> 元素本身，以改變其盒模型屬性，如寬度、高度、邊框和背景等。
下面我們將通過幾個實際案例來具體說明如何使用 CSS 對 <div> 元素進行樣式化。
<b>案例1: 改變 <div> 的寬度和高度</b>

要改變 <div> 元素的寬度和高度，我們可以使用 CSS 中的 width 和 height 屬性。例如，下面的代碼將使一個具有 200 像素寬度和 100 像素高度的 <div> 元素:

<code>
<div style="width: 200px; height: 100px;">
這是一個具有指定寬度和高度的 <div> 元素。
</div>
</code>

<b>案例2: 設置 <div> 的背景顏色和邊框</b>

我們可以使用 CSS 中的 background-color 屬性來為 <div> 元素設置背景顏色。此外，我們還可以使用 border 相關屬性來為 <div> 元素設置邊框樣式、邊框寬度和邊框顏色。下面的代碼演示了如何設置一個帶有紅色背景和藍色邊框的 <div> 元素:

<code>
<div style="background-color: red; border: 2px solid blue;">
這是一個具有指定背景顏色和邊框的 <div> 元素。
</div>
</code>

<b>案例3: 嵌套 <div> 元素</b>

除了設置 <div> 元素自身的樣式，我們還可以在一個 <div> 元素內部嵌套另一個 <div> 元素，并為每個 <div> 元素設置不同的樣式。下面的代碼演示了一個嵌套的 <div> 結構，其中外層 <div> 元素有紅色背景和綠色邊框，內層 <div> 元素有藍色背景和黃色邊框:

<code>
<div style="background-color: red; border: 2px solid green;">
這是外層 <div> 元素。
<div style="background-color: blue; border: 2px solid yellow;">
這是內層 <div> 元素。
</div>
</div>
</code>

以上是一些關于如何使用 CSS 對 <div> 元素進行樣式化的基礎案例。通過使用不同的 CSS 屬性和值，我們可以實現各種不同的外觀和布局效果。記住，這只是一個入門級別的介紹，而 CSS 還有許多其他強大的功能和特性可以用于進一步樣式化 <div> 元素。深入學習和實踐 CSS，你將能夠掌握更多高級技巧，并創建出令人驚艷的網頁設計作品！