CSS的元素顯示模式與轉換

CSS的元素顯示模式與轉換

1. CSS的元素顯示模式

1.1 塊元素

<div>標籤是最典型的塊元素。另外常見的塊元素有h1~h六、p、ul、ol、li等。

特色：

1. 獨佔一行
2. 高度、寬度、外邊距和內邊距均可以控制
3. 寬度默認是父級寬度的100%
4. 是一個容器及盒子，裏面能夠放行內元素或塊級元素

注：文字類的元素內不能使用塊級元素，例如p、h1~h6等。

1.2 行內元素(內聯元素)

<span>標籤是最典型的行內元素。另外常見的行內元素有a、strong、em、i、del、ins等。

特色：

1. 相鄰行內元素在同一行上，一行能夠顯示多個
2. 高度、寬度直接設置是無效的
3. 默認寬度是它自己內容的寬度
4. 裏面只能放文本或其它行內元素

注：

• 連接裏面不能再放連接
• 特殊狀況連接a裏能夠放塊級元素，可是給a轉換一下塊級模式更安全

1.3 行內塊元素

img、input、td標籤同時具備塊元素和行內元素的特色，稱爲行內塊元素。

特色：

1. 相鄰行內元素或行內塊元素在同一行上，可是它們之間會有空白縫隙，一行能夠顯示多個。（行內元素特色）
2. 默認寬度是它自己內容的寬度。（行內元素特色）
3. 高度、寬度、外邊距和內邊距均可以控制。（塊級元素特色）

1.4 元素顯示模式總結

元素模式	元素排列	設置樣式	默認寬度	包含
塊級元素	一行只能放一個塊級元素	能夠設置寬度高度	父級元素的100%	能夠包含任何標籤
行內元素	一行能夠放多個行內元素	不能夠直接設置寬度高度	它自己內容的寬度	能夠容納文本或其它行內元素
行內塊元素	一行能夠放多個行內塊元素	能夠設置寬度高度	它自己內容的寬度

2. CSS的元素顯示模式轉換

行內元素要先轉換模式，才能設置寬度、高度。

轉換爲	樣式
塊級元素	display: block;
行內元素	display: inline;
行內塊元素	display: inline-block;