CSS（層疊樣式表）是一種用于網頁布局和樣式設計的技術。在CSS中，<div>（也稱為“division”或“容器”）是一種常用的HTML標簽，用于創建獨立的內容塊或容器。在本文中，我們將介紹一些關于CSS <div>書籍的案例，以幫助讀者更好地理解和運用這個強大的特性。
<div>標簽可以通過應用CSS樣式來控制其外觀和行為。它可以用來劃分頁面的不同部分，使其更加結構化和可維護。通過為每個<div>標簽定義特定的樣式，您可以輕松地控制它們的背景顏色、邊框樣式、大小和位置等屬性。這使得<div>標簽在網頁設計領域中變得非常有用。
下面是一些使用CSS <div>標簽的案例，以幫助解釋其功能和使用方法：
案例 1：基本布局

下面的代碼演示了如何使用CSS <div>標簽創建一個基本布局：

<code>
<style>
.container {
width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f1f1f1;
}
</style>
<br>
    <div class="container">
<h1>歡迎來到CSS <div>書籍！</h1>
<p>這是一個簡單的例子，展示了如何使用CSS <div>標簽創建布局。</p>
</div>
</code>

在這個案例中，我們創建了一個名為.container的CSS類，它具有特定的樣式。該類定義了一個具有寬度為800像素、居中對齊、具有20像素的內邊距和淺灰色背景的<div>容器。在容器中，我們添加了一個標題（<h1>）和一個段落（

）。這個例子展示了如何使用<div>標簽來劃分頁面并應用CSS樣式。
案例 2：柵格布局

下面的代碼展示了如何使用CSS <div>標簽創建一個簡單的柵格布局：

<code>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.box {
background-color: #f1f1f1;
padding: 20px;
}
</style>
<br>
    <div class="container">
<div class="box">框1</div>
<div class="box">框2</div>
<div class="box">框3</div>
</div>
</code>

在這個案例中，我們創建了一個名為.container的CSS類，它使用CSS grid屬性來定義一個3列的柵格布局。.box類定義了每個單獨的框的樣式。這個例子展示了如何使用CSS <div>標簽和柵格布局來創建一個簡單的網格系統。
綜上所述，CSS <div>標簽是一種非常強大的工具，可用于創建網頁布局、劃分頁面內容和應用樣式。通過使用CSS樣式和屬性，您可以輕松地控制<div>標簽的外觀和行為。我們希望這些案例能幫助您更好地理解和運用CSS <div>標簽的功能。