好程式設計師分享CSS標籤的分類、及顯示模式

好程式設計師分享 CSS標籤的分類 、 及顯示模式 ， 標籤的型別(顯示模式) HTML標籤一般分為 塊標籤 和 行內標籤 兩種型別，它們也稱塊元素和行內元素。

一、塊級元素(block-level)

每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。常見的塊元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 等，其中  <div>  標籤是最典型的塊元素。

特點 ： （重要）

1、獨佔父親一行，寬度預設是容器的100%；

2、高度，行高、外邊距以及內邊距都可以控制；（支援寬高的設定）

3、不設定高度，高度由內容決定；

4、可以容納內聯元素和其他塊元素；

二、行內元素(inline-level)

行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字型大小和影像尺寸來支撐結構，一般不可以設定寬度、高度、對齊等屬性，常用於控制頁面中文字的樣式。常見的行內元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等，其中  <span>  標籤最典型的行內元素。

特點：（重要）

1、和相鄰行內元素在一行上，換行會有空隙；

2、高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效；（不支援寬高）

3、預設寬度就是它本身內容的寬度；

4、行內元素只能容納文字或則其他行內元素。（a特殊）

Tips：

1、只有 文字才 能組成段落 因此 p 裡面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裡面不能放其他塊級元素。

2、連結裡面不能再放連結。

三、行內塊元素（inline-block）

在行內元素中有幾個特殊的標籤—— <img />、<input />、<td> ，可以對它們設定寬高和對齊屬性，稱它們為  行內塊元素 。

特點：

1、和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙；

2、預設寬度就是它本身內容的寬度；

3、高度，行高、外邊距以及內邊距都可以控制。

四、標籤顯示模式轉換 display

在設計網頁的時候，可能需要給不同的標籤設定不同的顯示模式。可以透過 display 實現。

1、塊轉行內：display:inline;

2、行內轉塊：display:block;

3、塊、行內元素轉換為行內塊： display: inline-block;