好程序員分享CSS標籤的分類、及顯示模式

好程序員分享CSS標籤的分類、及顯示模式，標籤的類型(顯示模式) HTML標籤通常分爲塊標籤和行內標籤兩種類型，它們也稱塊元素和行內元素。

1、塊級元素(block-level)

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

特色：（重要）

一、獨佔父親一行，寬度默認是容器的100%；

二、高度，行高、外邊距以及內邊距均可以控制；（支持寬高的設置）

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

四、能夠容納內聯元素和其餘塊元素；

2、行內元素(inline-level)

行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，通常不能夠設置寬度、高度、對齊等屬性，經常使用於控制頁面中文本的樣式。常見的行內元素有、、、、、、<s>、<ins>、<u>、<span>等，其中 <span> 標籤最典型的行內元素。

特色：（重要）

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

二、高、寬無效，但水平方向的padding和margin能夠設置，垂直方向的無效；（不支持寬高）

三、默認寬度就是它自己內容的寬度；

四、行內元素只能容納文本或則其餘行內元素。（a特殊）

Tips：

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

二、連接裏面不能再放連接。

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

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

特色：

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

二、默認寬度就是它自己內容的寬度；

三、高度，行高、外邊距以及內邊距均可以控制。

4、標籤顯示模式轉換 display

在設計網頁的時候，可能須要給不一樣的標籤設置不一樣的顯示模式。能夠經過 display 實現。

一、塊轉行內：display:inline;

二、行內轉塊：display:block;

三、塊、行內元素轉換爲行內塊： display: inline-block;