div 占塊
<div> 是HTML中最常用的標簽之一，用于定義一個文檔中的分塊部分。它是一個塊級元素，可以將頁面劃分為不同的區域，并為這些區域應用樣式和規則。在本文中，我們將詳細介紹 div 占塊的概念以及如何使用它。
<div> 元素是一個用于生成無意義的塊級容器的標簽。它本身不具備特定的含義，而是通過 CSS 樣式來定義它的外觀和行為。在網頁設計中，我們經常使用 <div> 元素來劃分頁面的各個部分，然后用 CSS 對每個 <div> 元素進行樣式設置。
以下是一些示例代碼，演示了如何使用 div 來排列網頁上的元素。

例子 1：

<div>
<h1>標題</h1>
<p>這里是一些文字內容。</p>
<img src="image.jpg" alt="圖片">
</div>

在這個例子中，我們創建了一個簡單的 div 容器，里面包含一個標題、一個段落和一張圖片。通過使用 div 容器，我們可以根據需要調整這些元素的布局和樣式。

例子 2：

<div class="container">
<div class="sidebar">側邊欄</div>
<div class="content">內容</div>
</div>

在這個例子中，我們創建了一個帶有兩個子 div 元素的容器。通過為 div 元素添加類名，我們可以為它們應用不同的樣式。例如，我們可以為側邊欄設置寬度和背景顏色，為內容區域設置邊距和字體樣式。
<div> 元素的使用不限于以上示例。它可以與其他 HTML 元素和 CSS 屬性結合使用，以創建多樣化的頁面布局和效果。以下是一些真實案例，展示了如何使用 <div> 元素來構建網頁布局。

案例 1：

<div class="header">頭部</div>
<div class="menu">菜單</div>
<div class="content">內容</div>
<div class="footer">底部</div>

在這個案例中，我們將頁面分為頭部、菜單、內容和底部四個部分。通過為每個 <div> 元素添加類名，我們可以對它們進行樣式設置，并控制它們的布局和排列方式。

案例 2：

<div class="row">
<div class="column">列 1</div>
<div class="column">列 2</div>
<div class="column">列 3</div>
</div>

在這個案例中，我們創建了一個包含三列的容器。通過為每個 <div> 元素添加相同的類名，我們可以為它們應用相似的樣式，并使用 CSS 設置它們的寬度和間距。
來說，<div> 元素是一種用于劃分網頁布局的重要工具。通過將頁面劃分為多個 <div> 元素，我們可以根據需要對它們進行樣式和布局設置，從而實現多樣化的頁面設計和效果。無論是簡單的結構還是復雜的布局，<div> 元素都能幫助我們實現靈活而豐富的頁面展示。