元素顯示模式及轉換
阿新 • • 發佈：2020-12-17
技術標籤：# html學習
元素顯示模式
塊元素
舉例：
<div>、<p>、<h1>~<h6>、<ul> 、<ol>、<li>
特點：
- 獨佔一行
- 可以設定寬度、高度及內邊距
- 寬度預設為容器(父元素)的100%
- 是一個容器及盒子，裡面可以放行內或者塊級元素
注意：
文字類元素內不能使用塊級元素 ，例如<p>、<h1>~<h6>，只能放文字
行元素【內聯元素】
舉例：<a>、<span>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>
特點：
- 一行可以放多個行內元素
- 寬和高設定無效
- 預設寬度為本身內容的寬度
- 行內元素只能容納文字或其他行內元素
注意：
- 連結元素裡面不能再放連結
- <a>裡面可以放塊級元素，但是給<a>轉化一下塊級模式最安全
行內塊元素
舉例：
<img/>、<input/>、<td>
特點：
- 與相鄰行內元素在同一行上，但是他們之前會有空白縫隙，一行可以顯示多個
- 預設寬度為他本身內容的寬度
- 高度、行高、寬度、外邊距及內邊距都可以控制
總結：
| 元素模式 | 元素排列 | 設定樣式 | 預設寬度 | 包含 |
| 塊級元素 | 一行只能放一個塊級元素 | 可以設定寬度和高度 | 容器的100% | 容器及可以包含任何標籤，文字標籤除外 |
| 行內元素 | 一行可以放多個行內元素 | 不可以設定寬度和高度 | 它本身內容的寬度 | 容納文字或其他行內元素，但是a標籤不能包含a標籤，且a標籤可以包含塊級元素 |
| 行內塊級元素 | 一行放多個行內塊級元素 | 可以設定寬度和高度 | 它本身內容的寬度 |
顯示模式轉化
例如：
將行內元素轉化為塊元素，例如a標籤
display:block;
將塊級元素轉化為行內元素，例如div標籤
display:inline;
將行內元素轉化為行內塊元素
display:inline-block;
舉例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> a { width: 200px; height: 100px; background-color: chartreuse; display: block; } div { background-color: coral; display: inline; } span { width: 100px; height: 50px; background-color: cornflowerblue; display: inline-block; } </style> </head> <body> <a href="#">行內元素轉塊級元素</a> <div>塊級元素轉行內元素</div> <div>塊級元素轉行內元素</div> <span>行內元素轉行內塊元素</span> <span>行內元素轉行內塊元素</span> </body> </html>
結果：
