1.標籤顯示模式（display）
1.1 塊級元素(block-level)
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。
- 塊級元素的特點
（1）比較霸道，自己獨佔一行
（2）高度，寬度、外邊距以及內邊距都可以控制。
（3）寬度默認是容器（父級寬度）的100%
（4）是一個容器及盒子，裏面可以放行內或者塊級元素。
- 注意：
- 只有 文字才 能組成段落 因此 p 裏面不能放塊級元素，特別是 p 不能放div
- 同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裏面不能放其他塊級元素。
1.2 行內元素(inline-level)
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。有的地方也成內聯元素
- 行內元素的特點：
（1）相鄰行內元素在一行上，一行可以顯示多個。
（2）高、寬直接設置是無效的。
（3）默認寬度就是它本身內容的寬度。
（4）行內元素只能容納文本或則其他行內元素。
- 注意：
- 鏈接裏面不能再放鏈接。
- 特殊情況a裏面可以放塊級元素，但是給a轉換一下塊級模式最安全。
1.3 行內塊元素（inline-block）
在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素。
-
行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。一行可以顯示多個
（2）默認寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。
1.4 三種模式總結區別
| 元素模式 | 元素排列 | 設置樣式 | 默認寬度 | 包含 |
|---|---|---|---|---|
| 塊級元素 | 一行只能放一個塊級元素 | 可以設置寬度高度 | 容器的100% | 容器級可以包含任何標籤 |
| 行內元素 | 一行可以放多個行內元素 | 不可以直接設置寬度高度 | 它本身內容的寬度 | 容納文本或則其他行內元素 |
| 行內塊元素 | 一行放多個行內塊元素 | 可以設置寬度和高度 | 它本身內容的寬度 |
1.5 標籤顯示模式轉換 display
- 塊轉行內：display:inline;
- 行內轉塊：display:block;
- 塊、行內元素轉換爲行內塊： display: inline-block;