CSS的元素顯示模式 1. 什麼是元素顯示模式 作用：網頁的標簽非常多，在不同的地方會用到不同類型的標簽，瞭解他們的特點可以更好的佈局我們的網頁 元素的顯示模式就是元素（標簽）以什麼樣的方式進行顯示，比如 自己獨占一行，比如一行可以放多個 HTML元素一般分為塊元素和行內元素兩種類型 2. 塊元素 ...
CSS的元素顯示模式
- 什麼是元素顯示模式
- 作用：網頁的標簽非常多，在不同的地方會用到不同類型的標簽，瞭解他們的特點可以更好的佈局我們的網頁
- 元素的顯示模式就是元素（標簽）以什麼樣的方式進行顯示，比如<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 /> ,他們同時具有塊元素和行內元素的特點
- 行內塊元素的特點
- 和相鄰行內塊元素在一行上，但是他們之間會有空白縫隙。一行可以顯示多個
- 預設寬度就是它本身內容的寬度
- 高度、寬度、外邊距以及內邊距都可以控制
| 元素模式 | 元素排列 | 設置樣式 | 預設高度 | 包含 |
|---|---|---|---|---|
| 塊級元素 | 一行只能放一個塊級元素 | 可以設置寬度高度 | 容器的100% | 容器級可以包含任何標簽 |
| 行內元素 | 一行可以放多個行內元素 | 不可以設置寬度高度 | 它本身內容的寬度 | 容納文本或其他行內元素 |
| 行內塊元素 | 一行放多個行內塊元素 | 可以設置寬度和高度 | 它本身的寬度 |
- 元素顯示模式的轉換
- 特殊情況下，我們需要元素模式的轉化，簡單理解：一個模式的元素需要另一種模式的特性，比如想要增加鏈接<a> 的觸發範圍
- 轉化為塊元素：display：block
- 轉換為行內元素：display：inline
- 轉換為行內塊元素：display：inline-block
