<div> + CSS 排版簡介
<div> 是 HTML 中的一個重要標簽，它代表著一個容器，可以將多個元素組合在一起并進行樣式設置。而 CSS（層疊樣式表）則是一種用于描述網頁樣式的語言，可以對 HTML 中的元素進行美化和布局。
在網頁設計和開發中，使用 <div> 結合 CSS 進行排版是一種常見的方法。通過合理地使用 <div> 標簽以及 CSS 屬性，我們可以創建出各式各樣的布局和排版效果，使網頁更加美觀和易讀。下面幾個代碼案例將詳細解釋說明如何使用 <div> + CSS 進行排版。
案例一：基礎的塊級布局
下面的代碼演示了如何使用 <div> 實現一個基礎的塊級布局。假設我們有一個網頁，需要將標題、導航欄和內容分別放在不同的區域中，并按照一定的比例進行布局。

html
<pre>
<style>
.container {
width: 100%;
height: 300px;
}
.header {
width: 100%;
height: 20%;
}
.nav {
width: 20%;
height: 80%;
}
.content {
width: 80%;
height: 80%;
}
</style>
<br>
<div class="container">
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
</div>

在上述代碼中，我們定義了一個容器（container）的樣式，設置其寬度為100%、高度為300px。然后分別定義了標題（header）、導航欄（nav）和內容（content）的樣式，其中標題的高度占容器的20%，導航欄的寬度占容器的20%、高度占容器的80%，內容的寬度占容器的80%、高度占容器的80%。
通過這種方式，我們成功地將網頁分成了三個區域，并且按照我們設定的比例進行了布局。
案例二：響應式布局
在移動設備普及的時代，響應式布局已經成為一種非常重要的技術。下面的代碼演示了如何使用 <div> 和 CSS 進行響應式布局。

html
<pre>
<style>
.container {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
}
.item {
width: 50%;
height: 200px;
}
@media screen and (max-width: 600px) {
.item {
width: 100%;
}
}
</style>
<br>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

在上述代碼中，我們使用了 flexbox 布局來實現響應式的效果。定義了一個容器（container）的樣式，將其寬度設置為100%，高度設置為auto，并使用了 display: flex 和 flex-wrap: wrap 這兩個屬性，使得容器內的元素可以自動換行。
然后定義了一個項目（item）的樣式，將其寬度設置為50%，高度設置為200px。但是，在小于600px的屏幕寬度下，通過使用 @media 查詢，我們將項目的寬度改為100%。
通過這種方式，我們實現了在不同屏幕寬度下的自適應布局效果。
：
<div> + CSS 排版是網頁設計和開發中常見的一種技術。通過合理地使用 <div> 標簽和 CSS 屬性，我們可以創建各種不同的布局和排版效果，使網頁更加美觀和易讀。本文通過兩個案例對如何使用 <div> 進行排版進行了詳細解釋說明。希望本文對讀者在開發過程中的排版工作有所啟發和幫助。