# div與span使用實例分析
在HTML中，`<div>`和`<span>`是最常用的通用容器元素，但它們的用途和表現特性有顯著差異。本文通過實例分析二者的典型應用場景。
## 1. div的塊級特性
`<div>`是**塊級元素**，默認獨占一行，適合布局結構的劃分：
```html
<div style="background: #f0f0f0; padding: 10px;">
<h2>章節標題</h2>
<p>這是一個段落內容塊</p>
</div>
典型應用場景： - 頁面主容器 - 導航欄/頁腳區域 - 卡片式布局組件
<span>是行內元素，僅包裹內容不換行，常用于文本修飾：
<p>這段文字包含<span style="color: red;">紅色強調</span>內容</p>
典型應用場景： - 局部文字樣式修改 - 圖標嵌入（如Font Awesome） - JavaScript操作的最小DOM單元
| 特性 | div | span |
|---|---|---|
| 顯示類型 | 塊級（block） | 行內（inline） |
| 默認寬度 | 父元素100% | 內容寬度 |
| 典型用途 | 結構布局 | 文本級修飾 |
合理使用這兩個元素能使代碼結構更清晰。當需要CSS控制布局時優先選擇<div>，而文本級微調則使用<span>。
“`
（全文約400字）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
