CSS標簽顯示模式（display）

們網頁的標簽非常多，在不同地方會用到不同類型的標簽，以便更好的完成我們的網頁。

標簽的類型(顯示模式)

HTML標簽一般分為塊標簽和行內標簽兩種類型，它們也稱塊元素和行內元素。具體如下：

塊級元素(block-level)

每個塊元素通常都會獨自占據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建。

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

塊級元素的特點：

（1）總是從新行開始

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

（3）寬度默認是容器的100%

（4）可以容納內聯元素和其他塊元素。

行內元素(inline-level)

行內元素（內聯元素）不占有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。

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

行內元素的特點：

（1）和相鄰行內元素在一行上。

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

（3）默認寬度就是它本身內容的寬度。

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

注意

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

塊級元素和行內元素區別

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

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

行內塊元素（inline-block）

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

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

標簽顯示模式轉換 display

塊轉行內：display:inline;

行內轉塊：display:block;

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

義元素內部和外部的顯示類型。

·外部顯示類型display-outside：生成一個內聯元素盒，該元素之前或者之后并不會產生換行。在流式布局中，如果有空間，下一個元素將會在同一行上。塊級盒子可以修改寬度和高度。內邊距(padding)，外邊距(margin)和邊框(border)會將其他元素從當前盒子周圍"推開"。內聯盒子不會產生換行，設置寬度和高度無效。

·內部顯示類型默認流式布局：將成為一個自包含的獨立塊級格式化上下文，使得該元素的內部布局不受外部元素的影響。將元素呈現為表格形式的布局，同時具備內聯元素和塊級元素的特點，即可以設置寬高，又可以在同一行顯示。同display：inline flow-root；外部顯示為inline，內部布局為table；外部顯示為inline，內部布局為fLex；外部顯示為inline，內部布局為grid。同display：inline table；同display：inline flex；同display：inline grid。元素不顯示，不占據空間。

迎關注！

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

display：block

設置元素顯示方式為塊級元素顯示，顯示方式為塊級元素的標簽，默認寬度為父元素寬度，同時寬度和高度都是可以手動設置的，相鄰的塊級元素是換行顯示的。

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

display：inline

設置元素顯示方式為內聯元素顯示，顯示方式為內聯元素的標簽，默認寬度為內容寬度，寬度和高度是不可設置的，相鄰的內聯元素是不換行顯示的（但同一元素內的文本是可以換行的）。

一些標簽的默認顯示方式為inline，不需要設置display:inline也具有內聯元素的以上特性，它們是：span，label，a，cite，em等。

display:inline-block

設置元素的顯示方式為行內塊元素，設置了該顯示方式的元素同時具有inline和block元素的優質特性，默認寬度為內容寬度，但是寬度和高度都是可以設置的，元素同行顯示，整塊換行。

默認為inline-block顯示的元素有input、textarea、select、button等。

display:none

設置元素不顯示。

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

display

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

display的取值及描述

收藏轉發請先關注，謝謝支持！

在線咨詢

上一篇：HTML常用標簽的匯總
下一篇：R語言爬蟲系列｜動態數據抓取范例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商