在HTML中，元素可以分為塊級元素（Block-level elements）和內聯元素（Inline elements）。這兩類元素在頁面布局和樣式應用上有不同的特點和用途。

一、塊級元素（Block-level elements）

1. 定義

塊級元素在頁面上以塊的形式顯示，通常會獨占一行，其寬度默認為父容器的寬度。

2. 特點

• 獨占一行：塊級元素會在新行開始，并且其后的元素也會在新行開始。
• 寬度和高度：可以設置寬度（width）和高度（height）。
• 內邊距和外邊距：可以設置內邊距（padding）和外邊距（margin）。

3. 常見的塊級元素

• <div>：通用的塊級容器，用于布局。
• <p>：段落。
• <h1>到<h6>：標題。
• <ul>、<ol>、<li>：列表。
• <table>：表格。
• <form>：表單。

4. 示例

<div style="background-color: lightblue; padding: 20px;"><h1 style="color: blue;">歡迎來到我的網站</h1><p style="color: green;">這是一個段落文字。</p>
</div>

二、內聯元素（Inline elements）

1. 定義

內聯元素在頁面上以行內形式顯示，不會獨占一行，其寬度由內容決定。

2. 特點

• 行內顯示：內聯元素不會獨占一行，與前后元素在同一行顯示。
• 寬度和高度：寬度由內容決定，不能直接設置寬度和高度。
• 內邊距和外邊距：可以設置垂直方向的內邊距（padding-top、padding-bottom）和外邊距（margin-top、margin-bottom），但水平方向的內邊距和外邊距可能不會按預期工作。

3. 常見的內聯元素

• <span>：通用的內聯容器，用于樣式控制。
• <a>：超鏈接。
• <img>：圖像。
• <strong>：加粗文本。
• <em>：強調文本。
• <input>：表單輸入框。

4. 示例

<p>這是一個<a href="https://www.example.com" style="color: red;">鏈接</a>示例。</p>
<span style="background-color: yellow;">這是一個內聯元素。</span>

三、塊級元素與內聯元素的轉換

1. 使用CSS控制顯示方式

可以通過CSS的display屬性來改變元素的顯示方式。

• display: block;：將內聯元素轉換為塊級元素。
• display: inline;：將塊級元素轉換為內聯元素。
• display: inline-block;：將內聯元素轉換為塊級元素，但允許與其他元素在同一行顯示。

2. 示例

<span style="display: block; background-color: lightblue;">這是一個顯示為塊級的內聯元素。</span>
<div style="display: inline; background-color: lightgreen;">這是一個顯示為內聯的塊級元素。</div>

四、總結

• 塊級元素：獨占一行，可以設置寬度和高度，適用于布局和需要獨占空間的元素。
• 內聯元素：與前后元素在同一行顯示，寬度由內容決定，適用于文本和小部件。
• 轉換顯示方式：通過CSS的display屬性可以靈活地改變元素的顯示方式，實現更復雜的布局需求。