CSS 的元素顯示模式（塊級元素、行內元素、行內塊元素）
阿新 • • 發佈：2021-07-01
元素顯示模式就是元素（標籤）以什麼方式進行顯示，比如<div>自己佔一行，比如一行可以放多個<span>。
HTML 元素一般分為塊元素和行內元素兩種型別
塊元素
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 標籤是最典型的塊元素。
塊級元素的特點：
① 比較霸道，自己獨佔一行。
② 高度，寬度、外邊距以及內邊距都可以控制。
③ 寬度預設是容器（父級寬度）的100%。
④ 是一個容器及盒子，裡面可以放行內或者塊級元素。
注意：
文字類的元素內不能使用塊級元素
<p>
<p> 裡面不能放塊級元素，特別是不能放<div> 同理，
<h1>~<h6>等都是文字類塊級標籤，裡面也不能放其他塊級元素
行內元素
常見的行內元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中
<span> 標籤是最典型的行內元素。有的地方也將行內元素稱為內聯元素。
行內元素的特點：
① 相鄰行內元素在一行上，一行可以顯示多個。
② 高、寬直接設定是無效的。
③ 預設寬度就是它本身內容的寬度。
④ 行內元素只能容納文字或其他行內元素。
注意：
連結裡面不能再放連結
特殊情況連結 <a>
<a> 轉換一下塊級模式最安全
行內塊元素
在行內元素中有幾個特殊的標籤 —— <img />、<input />、<td>，它們同時具有塊元素和行內元素的特點。有些資料稱它們為行內塊元素。
行內塊元素的特點： ① 和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內元素特點）。
② 預設寬度就是它本身內容的寬度（行內元素特點）。
③ 高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）。
總結
元素顯示模式轉換
特殊情況下，我們需要元素模式的轉換，簡單理解: 一個模式的元素需要另外一種模式的特性，比如想要增加連結 <a>
- 轉換為塊元素：display:block;
- 轉換為行內元素：display:inline;
- 轉換為行內塊：display: inline-block;