CSS（層疊樣式表）和div（或稱為塊級元素）是前端開發中非常重要且常用的兩個概念。CSS用于控制網頁的樣式和布局，而div是用來創建盒狀容器的 HTML 元素。通過CSS與div的結合使用，我們可以輕松地實現網頁的布局和樣式調整。在本教程中，我們將深入講解CSS與div的使用，以幫助您更好地掌握前端開發的技能。
，我們來看一個簡單的使用CSS和div的案例。

以下是一個HTML的示例：

<code>
<div class="container">
<h1>這是一個標題</h1>
<p>這是一個段落</p>
</div>
</code>

在上述示例中，我們使用了一個div元素，class屬性的值為"container"。然后，在該div元素內部，我們又包含了一個h1元素和一個p元素。
接下來，我們使用CSS來為這個示例添加一些樣式：

<code>
.container {
background-color: #f2f2f2;
padding: 20px;
}
<br>
    h1 {
color: blue;
font-size: 24px;
}
<br>
    p {
color: red;
}
</code>

在上述示例中，我們使用了選擇器（.container、h1、p）來選擇特定的元素，并為其添加樣式。通過設置背景顏色、內邊距以及文字顏色和字體大小，我們為這個示例添加了一些基本的樣式。
通過上述案例，我們可以看到，通過使用CSS和div，我們可以很方便地控制元素的樣式和布局。接下來，讓我們看幾個更加復雜的案例，進一步說明CSS和div的使用。
第二個案例，我們將使用CSS和div來創建一個響應式的網格布局。

以下是一個HTML的示例：

<code>
<div class="grid">
<div class="grid-item">項目1</div>
<div class="grid-item">項目2</div>
<div class="grid-item">項目3</div>
<div class="grid-item">項目4</div>
<div class="grid-item">項目5</div>
<div class="grid-item">項目6</div>
</div>
</code>

在上述示例中，我們使用了一個div元素，class屬性的值為"grid"。然后，在該div元素內部，我們又包含了六個div元素，class屬性的值為"grid-item"。
接下來，我們使用CSS來為這個示例添加一些樣式：

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

在上述示例中，我們使用了CSS的grid布局來創建一個響應式的網格。通過設置網格顯示、網格列模板和間距，我們實現了一個具有良好排列的網格布局。
通過上述案例，我們可以看到，借助CSS與div的組合，我們可以輕松地實現復雜的網頁布局。
起來，CSS和div是前端開發中非常重要且常用的兩個概念。通過CSS控制樣式和布局，再使用div創建盒狀容器，我們可以實現各種各樣的網頁布局和樣式調整。通過本教程的學習，相信您已經對CSS和div的使用有了更深入的了解。繼續學習和實踐，您將能夠運用它們來創造出更加優雅和豐富的網頁。