一、塊元素（Block Elements）
1.定義與特點
- 獨占一行：默認情況下，塊元素會從新的一行開始，并且其后的元素也會被推到下一行。
- 可設置寬高：可以自由設置寬度（
width）和高度（height），并控制內外邊距（margin、padding）。 - 默認寬度：寬度默認為父容器的100%（即占滿父容器的寬度）。
- 內容包容性：可以包含其他塊元素或行內元素。
- 常見塊元素：
<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <nav>, <article>, <section>等。
2.示例代碼
<div style="width: 200px; background: lightblue;">這是一個塊元素（div）</div>
<p style="background: lightgreen;">段落（p）也是塊元素</p>效果：兩個元素分別獨占一行，且div的寬度為200px，p默認寬度為父容器100%。
3.塊元素的默認行為
寬度：默認占父容器的 100%（即父容器的寬度）。
高度：默認由內容撐開（即內容的高度決定，不會自動占滿父容器的高度）。
4.. 示例 1：有父容器的情況
HTML 結構
<div class="parent"><div class="child">這是一個塊元素（div）</div>
</div>CSS 樣式
.parent {width: 50%;/* 父容器寬度為父級的50%（假設父級是body） */background: lightblue;height: 200px;/* 父容器高度固定為200px */border: 3px solid black;}.child {/* 默認寬度：父容器的100%（即50%的body寬度） *//* 默認高度：由內容決定（文字高度） */background: lightgreen;border: 3px dashed red;}運行結果：
效果說明
- 寬度：
.child?的寬度占父容器?.parent?的 100%（即 50% 的?body?寬度）。 - 高度：
.child?的高度僅由內容（文字）決定，不會自動占滿父容器的 200px 高度。 - 父容器高度：父容器?
.parent?的高度是固定的 200px，子元素不會撐開它。
5. 示例 2：無父容器的情況
HTML 結構
<div class="child-no-parent">這是一個塊元素（div）</div>CSS 樣式
.child-no-parent {/* 默認寬度：占瀏覽器視口的100%（因為父容器是body/html） *//* 默認高度：由內容決定（文字高度） */background: lightgreen;border: 1px dashed red;margin: 0 auto; /* 居中演示 */
}
效果說明
- 寬度：
.child-no-parent?的寬度占瀏覽器視口的 100%（因為父容器是?<body>?或?<html>）。 - 高度：高度僅由內容（文字）決定，不會自動撐滿整個瀏覽器高度。
- 父容器影響：此時父容器是?
<body>，如果?<body>?的高度未設置，子元素的高度也不會撐開整個頁面的高度。
6. 關鍵點總結
| 場景 | 寬度 | 高度 |
|---|---|---|
| 有父容器 | 父容器的 100% | 由內容決定，不自動撐滿父容器高度 |
| 無父容器（直接 body） | 瀏覽器視口的 100% | 由內容決定，不自動撐滿頁面高度 |
7.示例代碼2
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 設置 html 和 body 的高度為 100% */html,body {height: 100%;margin: 0;background-color: rgb(30, 210, 135);}/* 父容器設置高度為 100px */.parent {height: 100px;background-color: lightblue;}/* 子塊元素高度占滿父容器 */.child {height: 50%;background-color: lightcoral;}</style>
</head><body><div class="parent"><div class="child">這個子元素的高度占滿了父容器。</div></div>
</body></html>
二、行內元素（Inline Elements）
1.定義與特點
- 水平排列：多個行內元素會水平排列在同一行，直到行內空間用完才會換行。
- 無法設置寬高：直接設置
width和height無效，元素寬度由內容決定。 - 垂直對齊問題：行內元素默認以基線（baseline）對齊，可能導致布局不整齊。
- 只能容納文本或行內元素：不能包含塊元素。
- 常見行內元素：
<span>, <a>, <strong>, <em>, <i>, <b>, <img>（特殊，實為行內塊），<input>（特殊，實為行內塊）等。
2.示例代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style></style>
</head><body><p>這是一個段落，里面包含行內元素：<span style="color: red;">紅色文本（span）</span><a href="#" style="color: blue;">藍色鏈接（a）</a></p>
</body></html>
效果：span和a在同一行顯示，且無法設置寬高。
三、行內塊元素（Inline-Block Elements）
1.定義與特點
行內塊元素兼具塊元素和行內元素的特點：
- 水平排列：與行內元素或行內塊元素在同一行顯示。
- 可設置寬高：可以自由設置
width、height和margin、padding。 - 默認寬度由內容決定：寬度和高度默認由內容撐開，但可以手動調整。
- 常見行內塊元素：
<img>, <input>, <button>, <textarea>, <select>等。
2.示例代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style></style>
</head><body><img src="image.jpg" style="width: 100px; height: 100px; display: inline-block;"><button style="width: 120px; height: 40px; display: inline-block;">按鈕</button>
</body></html>效果：圖片和按鈕水平排列，且可以設置寬高。
四、三者的核心區別對比
| 特性 | 塊元素（Block） | 行內元素（Inline） | 行內塊元素（Inline-Block） |
|---|---|---|---|
| 是否獨占一行 | 是 | 否 | 否 |
| 能否設置寬高 | 是 | 否（無效） | 是 |
| 默認寬度 | 父容器100% | 內容寬度 | 內容寬度 |
| 內容包容性 | 可包含塊元素和行內元素 | 僅能包含文本或行內元素 | 可包含其他元素（取決于具體標簽） |
| 常見標簽 | <div>,?<p>,?<h1> | <span>,?<a>,?<em> | <img>,?<input>,?<button> |
五、關鍵注意事項
-
元素嵌套規則：
- 塊元素可以包含塊元素或行內元素。
- 行內元素只能包含文本或行內元素（如
<p>中不能直接放<div>）。 - 特殊情況：
<a>標簽在HTML5中允許包含塊元素，但需謹慎使用。
-
行內元素的空白間隙：
- 行內元素或行內塊元素（如
<img>）之間默認會因HTML中的換行或空格產生微小間隙，可通過以下方式解決：- 使用
font-size: 0在父元素上消除空白。 - 將HTML標簽寫在一行上，避免換行。
- 使用
vertical-align: top調整對齊方式。
- 使用
- 行內元素或行內塊元素（如
-
display屬性轉換：
display: block：將元素轉為塊元素。display: inline：將元素轉為行內元素。display: inline-block：將元素轉為行內塊元素（常用技巧）。display: none：隱藏元素（不占用空間）。
六、應用場景
- 塊元素：用于布局容器（如導航欄、側邊欄、文章區塊）。
- 行內元素：用于文本樣式控制（如高亮、鏈接、強調）。
- 行內塊元素：用于需要同時水平排列和設置寬高的場景（如按鈕組、圖片網格）。
七、常見問題解答
-
為什么行內元素的
margin-top和margin-bottom無效？- 行內元素的高度由內容決定，垂直方向的外邊距會被忽略，但水平方向的
margin-left和margin-right有效。
- 行內元素的高度由內容決定，垂直方向的外邊距會被忽略，但水平方向的
-
如何讓行內元素垂直居中？
- 使用
vertical-align: middle（需與其他行內元素配合）或轉換為塊元素后用margin: auto。
- 使用
-
如何讓塊元素水平居中？
- 設置
margin: 0 auto（需指定寬度）。
- 設置
總結
- 塊元素：獨占一行，適合布局容器。
- 行內元素：水平排列，適合文本和鏈接。
- 行內塊元素：結合兩者優勢，適合需要靈活布局的場景（如按鈕、圖片排列）。
![LeetCode[24]兩兩交換鏈表中的節點](http://pic.xiahunao.cn/LeetCode[24]兩兩交換鏈表中的節點)