9.1 塊狀元素
HTML 塊狀模型 是一個概念，用來描述HTML元素在文件中的結構和顯示方式。它幫助開發者理解元素之間如何互動以及它們如何在頁面上排列。理解塊狀模型對於創建結構化和美觀的網頁至關重要。
HTML 塊狀模型由兩種主要類型的元素組成：塊狀 和 內聯。這些元素在網頁的佈局中起著關鍵作用。
塊狀元素
| HTML 標籤 | 描述 |
|---|---|
<div> |
用於分組其他元素的主要容器。 |
<p> |
一段文字。 |
<h1> – <h6> |
不同級別的標題。 |
<ul>, <ol> |
無序和有序列表。 |
<li> |
列表項目。 |
<section> |
文件部分的語義容器。 |
<article> |
獨立的內容塊。 |
<aside> |
與主要內容相關的內容（側邊欄）。 |
<header> |
頁面或部分的引導或導航部分。 |
<footer> |
頁面或部分的底部。 |
<nav> |
導航鏈接。 |
<main> |
文件的主要內容。 |
塊狀元素範例：
HTML
<div>
<h1>標題</h1>
<p>這是一個在塊狀元素 div 中的段落。</p>
</div>
9.2 內聯元素
內聯元素 (inline-level elements) 只佔據它們所需內容的寬度，不會從新行開始。它們只能包含其他內聯元素或文本。內聯元素的例子：
| HTML 標籤 | 描述 |
|---|---|
<span> |
內聯內容分組的主要容器。 |
<a> |
超連結。 |
<strong>, <b> |
文本加粗。 |
<em>, <i> |
文本斜體。 |
<img> |
插入圖像。 |
<code> |
代碼顯示。 |
<label> |
標籤和表單元素之間的關聯。 |
<input>, <select>, <textarea> |
表單元素。 |
內聯元素範例：
HTML
<span>這是一個包含 <strong>粗體文本</strong> 和 <em>斜體</em> 的段落。</span>
9.3 塊狀模型的組成部分
每個在塊狀模型中的元素可以表示為一個矩形塊，由以下部分組成：
- 內容 (Content): 元素的內部內容，例如文本或圖像
- 內間距 (Padding): 內容與元素邊界之間的空間
- 邊界 (Border): 包圍內間距和內容的線條
- 外間距 (Margin): 元素邊界與其他元素之間的空間
塊狀模型的可視化：
CSS
.element {
width: 200px; /* 內容寬度 */
padding: 10px; /* 內間距 */
border: 2px solid red; /* 邊界 */
margin: 20px; /* 外間距 */
}
使用塊狀模型的 HTML 範例：
在這個例子中，帶有類別 "box" 的 <div> 元素的寬度為 200px，內間距為 10px，邊界為 2px，外間距為 20px。這些屬性決定了元素如何在頁面上顯示以及如何與其他元素互動。
CSS
.box {
width: 200px;
padding: 10px;
border: 2px solid red;
margin: 20px;
}
HTML
<div class="box">
這是一個塊狀模型的例子。
</div>
GO TO FULL VERSION