<div>
CSS 中的 div 元素是一個塊級元素，它可以用來組織網頁的內容并進行布局。我們可以通過 CSS 選擇器選擇一個或多個 div 元素，并對其應用樣式。
</div><div>
1. 使用 div 分割頭部和主體內容
一個常見的用法是使用 div 元素將網頁的頭部和主體內容進行分割，使網頁更具可讀性和易于維護。
</div><div>
HTML 代碼示例：
<code><div id="header"> <h1>這是網頁的頭部</h1> <p>這是一些附加信息</p> </div> <br> <div id="content"> <h2>這是網頁的主體內容</h2> <p>這是一些主體內容的詳細描述</p> </div></code>
CSS 代碼示例：
<code>#header {
background-color: #f1f1f1;
padding: 20px;
}
<br>
#content {
background-color: #fff;
padding: 20px;
}</code>在這個示例中，我們使用兩個 div 元素分別表示頭部和主體內容。我們給每個 div 元素定義了不同的 ID，并通過 CSS 選擇器為它們應用了不同的樣式。頭部的背景色為淡灰色，主體內容的背景色為白色，同時它們都有 20px 的內邊距。
</div><div>
2. 使用 div 實現柵格布局
另一個常見的用法是使用 div 元素實現柵格布局，這是一種常見的網頁布局方式，通過將頁面分割成多個列來實現內容的排列和整齊。
</div><div>
HTML 代碼示例：
<code><div class="grid-container"> <div class="grid-item">第一列</div> <div class="grid-item">第二列</div> <div class="grid-item">第三列</div> </div></code>
CSS 代碼示例：
<code>.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
<br>
.grid-item {
background-color: #f1f1f1;
padding: 20px;
}</code>在這個示例中，我們使用一個包含三個 div 元素的容器進行柵格布局。我們使用 CSS 的 grid 屬性將容器設置為柵格布局，并使用 grid-template-columns 屬性定義每列的大小為 1fr（1 份）。我們還通過縮小間距來增加每個柵格項目之間的間隔，并給每個柵格項目定義了相同的背景色和內邊距。
</div><div>
3. 使用 div 創建響應式網格
另一個有趣的用法是使用 div 元素創建響應式網格，使網頁能夠適應不同設備上的不同屏幕尺寸。
</div><div>
HTML 代碼示例：
<code><div class="grid-container"> <div class="grid-item">第一列</div> <div class="grid-item">第二列</div> <div class="grid-item">第三列</div> </div></code>
CSS 代碼示例：
<code>.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
<br>
.grid-item {
background-color: #f1f1f1;
padding: 20px;
}</code>在這個示例中，我們同樣使用一個包含三個 div 元素的容器進行網格布局。我們使用 CSS 的 grid 屬性將容器設置為柵格布局，并使用 grid-template-columns 屬性自動適應不同設備的屏幕尺寸。我們還通過 minmax() 函數來定義每列的最小和最大寬度，并通過縮小間距來增加每個柵格項目之間的間隔。
</div>通過這些典型的 CSS div 用法和實際案例的解釋，我們能更好地理解如何使用 div 元素進行網頁布局和組織。無論是分割頭部和主體內容、實現柵格布局還是創建響應式網格，div 元素都是一個非常強大的工具，可以幫助我們構建功能強大且易于維護的網頁。希望本文能對你在使用 div 元素時有所幫助。