CSS筆記-2：元素的顯示模式

元素的顯示模式即為一個標籤以什麼方式進行顯示，一般分為塊元素和行內元素

塊元素

常見的塊元素包括

<h> <p> <div> <ul> <ol> <li>等

塊元素的特點：
1.塊元素中的內容獨佔一行
2.塊元素中的高度、寬度以及頁邊距都可以設定
3.塊元素的預設寬度是上一級元素的100%
4.塊元素內部還可以放其他的塊元素或行內元素
5.文字類元素內部不能放塊元素，如p標籤和h標籤

行內元素

常見的行內元素包括

<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>

行內元素的特點：
1.相鄰行內元素的內容都會顯示在一行上
2.直接設定高、寬是無效的
3.預設寬度就是內容本身的寬度
4.行內元素只能容納文字或其它行內元素，不能新增塊元素
5.a標籤內部可以放塊元素，但是a裡面不能再巢狀a標籤，且a如果要放置塊元素需要提前轉化

行內塊元素

行內塊元素同時具有行內元素和塊元素的特點，一般常見的包括

<img> <input> <td>

其特點是：
行內元素型：
1.和相鄰行內塊元素在同一行上
2.預設寬度是其本身內容的寬度
塊元素特點：
高度、行高、外邊距、內邊距都可以被控制

元素顯示模式的轉化

將一類元素的顯示模式轉化為另一類

/*將行內元素轉化為塊級元素（以<a>標籤為例）*/
<style>
	a{
		width:50px;
		height:50px;
		background-color:red;
		display:block;
</style>

其中的display:block可以將行內元素轉化為塊元素，使得連結可以在這個邊長為50px的紅色正方形內均生效。

/*將塊元素轉化為行內元素（以<div>為例）*/
<style>
	div{
		display:inline;
		}
</style>

同理，轉化為行內塊元素的程式碼為display:inline-block