<div> 是 HTML 中的一個標簽，用于定義文檔的分區或節（division）。 CSS（Cascading Style Sheets）是一種用于定義和控制網頁樣式的標記語言。 在開發網頁時，經常會用到 <div> 標簽和 CSS 來布局和設計網頁。 通過 CSS，我們可以為 <div> 標簽添加樣式和布局，從而實現各種不同的效果。
下面我們來詳細介紹幾個關于 <div> 和 CSS 樣式的案例，以幫助理解和掌握使用 <div> 和 CSS 來進行網頁布局的方法和技巧。
案例一：居中對齊

以下代碼演示了如何使用 CSS 將 <div> 元素居中對齊：

<code>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 200px;
background-color: lightblue;
}
</code>

在這個案例中，我們定義了一個類名為 "center" 的樣式，通過設置 display: flex 來啟用彈性布局。 然后，設置 justify-content 和 align-items 屬性為 center，使內容在 <div> 元素中水平和垂直居中對齊。 最后，我們指定了 <div> 元素的寬度和高度，并為其添加了一個背景顏色，以便更好地顯示效果。

案例二：網格布局

以下代碼展示了如何使用網格布局來創建一個簡單的網格系統：

<code>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
<br>
        .grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</code>

在這個案例中，我們創建了一個類名為 "grid-container" 的樣式，將其 display 屬性設置為 grid，以啟用網格布局。 然后，通過設置 grid-template-columns 屬性為 repeat(3, 1fr)，我們創建了一個包含三列的網格布局， 每個列都占用相等的空間。使用 gap 屬性可以設置網格項之間的間距。 接下來，我們定義了一個類名為 "grid-item" 的樣式，它代表了網格中的每個單元格。 我們為每個單元格設置了背景顏色、內邊距和文本居中的樣式，以達到更好的可讀性和可視化效果。

案例三：響應式布局

以下代碼展示了如何使用媒體查詢（media queries）來創建一個響應式布局，使得在不同尺寸的屏幕上都能良好顯示：

<code>
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
<br>
        .item {
width: 100%;
height: 200px;
background-color: lightblue;
}
<br>
        @media only screen and (min-width: 600px) {
.item {
width: 50%;
}
}
<br>
        @media only screen and (min-width: 900px) {
.item {
width: 33.33%;
}
}
</code>

在這個案例中，我們創建了一個類名為 "container" 的樣式，設置其寬度為 100%，最大寬度為 1200px， 并通過設置 margin 屬性將其水平居中對齊。 然后，我們定義了一個類名為 "item" 的樣式，設置其寬度為 100% ，高度為 200px，并設置背景顏色。 接下來，通過使用媒體查詢，我們可以根據屏幕的寬度來改變網格項（即 "item" 類）的寬度。 在屏幕寬度大于 600px 時，我們將網格項的寬度設置為 50%； 在屏幕寬度大于 900px 時，我們將網格項的寬度設置為 33.33%。 這樣，在不同尺寸的屏幕上，我們的布局就可以根據需要自動調整和適應。

通過以上案例，我們可以看到 <div> 和 CSS 的強大之處。 在實際開發中，合理地使用 <div> 和 CSS 可以幫助我們更好地控制網頁的布局和樣式， 從而提升用戶體驗和頁面的可訪問性。同時，通過靈活運用不同的 CSS 屬性和布局技巧， 我們可以創建出各種不同風格和功能的網頁。
希望本文能給你對 <div> 和 CSS 的理解帶來幫助，并在實際開發中能夠靈活運用和發揮創造力。