們網(wǎng)頁的標(biāo)簽非常多，在不同地方會(huì)用到不同類型的標(biāo)簽，以便更好的完成我們的網(wǎng)頁。

標(biāo)簽的類型(顯示模式)

HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型，它們也稱塊元素和行內(nèi)元素。具體如下：

塊級(jí)元素(block-level)

每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標(biāo)簽是最典型的塊元素。

塊級(jí)元素的特點(diǎn)：

（1）總是從新行開始

（2）高度，行高、外邊距以及內(nèi)邊距都可以控制。

（3）寬度默認(rèn)是容器的100%

（4）可以容納內(nèi)聯(lián)元素和其他塊元素。

行內(nèi)元素(inline-level)

行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對(duì)齊等屬性，常用于控制頁面中文本的樣式。

常見的行內(nèi)元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標(biāo)簽最典型的行內(nèi)元素。

行內(nèi)元素的特點(diǎn)：

（1）和相鄰行內(nèi)元素在一行上。

（2）高、寬無效，但水平方向的padding和margin可以設(shè)置，垂直方向的無效。

（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。

（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。（a特殊）

注意

1. 只有 文字才 能組成段落 因此 p 里面不能放塊級(jí)元素，同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級(jí)標(biāo)簽，里面不能放其他塊級(jí)元素。
2. 鏈接里面不能再放鏈接。

塊級(jí)元素和行內(nèi)元素區(qū)別

塊級(jí)元素的特點(diǎn)：
（1）總是從新行開始
（2）高度，行高、外邊距以及內(nèi)邊距都可以控制。
（3）寬度默認(rèn)是容器的100%
（4）可以容納內(nèi)聯(lián)元素和其他塊元素。

行內(nèi)元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設(shè)置，垂直方向的無效。
（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。

行內(nèi)塊元素（inline-block）

在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />、<input />、<td>，可以對(duì)它們設(shè)置寬高和對(duì)齊屬性，有些資料可能會(huì)稱它們?yōu)樾袃?nèi)塊元素。

行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會(huì)有空白縫隙。
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（3）高度，行高、外邊距以及內(nèi)邊距都可以控制。

標(biāo)簽顯示模式轉(zhuǎn)換 display

塊轉(zhuǎn)行內(nèi)：display:inline;

行內(nèi)轉(zhuǎn)塊：display:block;

塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;

迎關(guān)注！

display是css布局中一個(gè)重要的屬性，它可以設(shè)置html標(biāo)簽的顯示方式。常見的取值有以下幾個(gè)：

display：block

設(shè)置元素顯示方式為塊級(jí)元素顯示，顯示方式為塊級(jí)元素的標(biāo)簽，默認(rèn)寬度為父元素寬度，同時(shí)寬度和高度都是可以手動(dòng)設(shè)置的，相鄰的塊級(jí)元素是換行顯示的。

一些標(biāo)簽的默認(rèn)顯示方式就是block，不需要設(shè)置display：block也具有塊級(jí)元素的以上特性，它們是：div，p，h1~h6，ul，form等。

display：inline

設(shè)置元素顯示方式為內(nèi)聯(lián)元素顯示，顯示方式為內(nèi)聯(lián)元素的標(biāo)簽，默認(rèn)寬度為內(nèi)容寬度，寬度和高度是不可設(shè)置的，相鄰的內(nèi)聯(lián)元素是不換行顯示的（但同一元素內(nèi)的文本是可以換行的）。

一些標(biāo)簽的默認(rèn)顯示方式為inline，不需要設(shè)置display:inline也具有內(nèi)聯(lián)元素的以上特性，它們是：span，label，a，cite，em等。

display:inline-block

設(shè)置元素的顯示方式為行內(nèi)塊元素，設(shè)置了該顯示方式的元素同時(shí)具有inline和block元素的優(yōu)質(zhì)特性，默認(rèn)寬度為內(nèi)容寬度，但是寬度和高度都是可以設(shè)置的，元素同行顯示，整塊換行。

默認(rèn)為inline-block顯示的元素有input、textarea、select、button等。

display:none

設(shè)置元素不顯示。

display:none與visibility:hidden的區(qū)別是display:none不顯示且不占位（直接移除了該元素），但visibility:hidden不顯示但占位（只是隱藏了）。

display

display屬性是用來設(shè)置元素的顯示方式的，在布局中具有重要意義。值得注意的是，無論什么元素都是可以通過設(shè)置display屬性來修改其顯示方式的，所以元素的顯示方式不是一成不變的，可以為了布局的需要而進(jìn)行更改。以上四個(gè)只是display較為常見的取值，還有一些較少用到的取值可以參考下圖的解釋：

display的取值及描述

display的取值及描述

收藏轉(zhuǎn)發(fā)請(qǐng)先關(guān)注，謝謝支持！