CSS 之 display 属性详解【全网最全】

Microi风闲

已于 2025-01-01 17:24:17 修改

阅读量2.3k

点赞数 35

分类专栏：【前端】CSS样式文章标签： css 前端 display flex

于 2024-12-31 23:13:08 首次发布

本文链接：https://blog.csdn.net/mss359681091/article/details/144858027

版权

【前端】CSS样式专栏收录该内容

7 篇文章

订阅专栏

CSS系列文章目录

一、总览

CSS display 属性设置元素是否被视为块级或行级盒子以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

其属性值共计有 18 种，按照类别可以分为以下六类：

外部表现类（display-outside）：block、inline。
内部表现类（display-inside）：flex、grid、table、flow、flow-root、ruby。
列表元素类（display-listitem）：list-item。
内部结构类（display-internal）：table-row、table-cell、table-column、table-caption、table-row-group、table-header-group、table-footer-group、table-column-group、ruby-base、ruby-text、ruby-base-container、ruby-text-container。
元素显示类（display-box）：none、contents。
预组合类（display-legacy）：inline-block、inline-table、inline-flex、inline-grid。

1.1 属性值

在这里插入图片描述

1.2 语法

CSS display 规定使用的关键字。

/* 预组合值 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* 生成盒子 */
display: none;
display: contents;

/* 多关键字语法 */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* 其他值 */
display: table;
display: table-row; /* 所有的 table 元素 都有等效的 CSS display 值 */
display: list-item;

/* 全局值 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

二、外部表现类

这些关键字规定元素的外部显示类型，实际上就是其在流式布局中的角色：

block
该元素生成一个块级盒子，在正常的流中，该元素之前和之后产生换行。
inline
该元素生成一个或多个行级盒子，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。

备注：在支持多关键字语法的浏览器中，当 display 属性仅有一个外部值（例如 display: block 或 display: inline）时，内部值会被设置为 flow（例如 display: block flow 和 display: inline flow）。

🎯为了保证布局在旧浏览器生效，你可以使用单值语法，例如，对于 display: inline flex，可以设置以下回退

.container {
  display: inline-flex;
  display: inline flex;
}

2.1 display: block

该属性值用于设置元素的外显类型为块级元素，在页面布局中，占据一整行的空间，在元素前后进行换行。该类型的元素可以设置✅ width、height、padding、margin 等属性。

<style>
.d {
  display: block;
  width: 200px;
  height: 100px;
  background: pink;
}
</style>

<p>这是一段文本</p>
<div class="d">这是一个块级元素</div>
<p>这是第二段文本</p>

在这里插入图片描述

2.2 display: inline

该属性值用于设置元素的外显类型为 行内元素 ，在页面布局中，可与其他行内元素位于同一行。

🚫设置 width、height ，以及竖直方向的 margin（top、bottom） 属性是 无效的。
✅设置水平方向的 padding、margin（left、right） 是 有效 的。
✅设置竖直方向的 padding（top、bottom） 时，在元素空间上是 有效 的，但这并不会影响与同一行的行内元素的对齐。

<style>
.d1 {
  display: inline;
  width: 200px;
  height: 100px;
  margin: 10px 20px;
  padding: 20px 10px;
  background: pink;
}
</style>

<p>这是一段块级元素文本</p>
<span>这是一段行内元素文本</span>
<div class="d1">这是一个行内元素</div>
<span>这是第二段行内元素文本</span>

在这里插入图片描述

三、内部表现类

这些关键字规定了元素的内部显示类型，其定义了该内容布局时的格式上下文的类型（假设它是一个非替换元素）：

备注：在支持多关键字语法的浏览器中，当 display 属性仅有一个内部值（例如 display: flex 或 display: grid）时，外部值会被设置为 block（例如 display: block flex 和 display: block grid）。

3.1 display: flex

该元素的行为类似块级元素并且根据 弹性盒模型 布局它的内容。

详情请移步：一文搞懂flex布局【弹性盒布局】

在这里插入图片描述

3.2 display:grid

该元素的行为类似块级元素并且根据 网格模型 布局它的内容。
该类型的元素将内部分为行和列，划分成一个个单元格，并通过一系列相关属性控制单元格的布局和大小。

该属性值的主要应用场景为：多行多列元素水平且垂直对齐。

demo 示例：

<style>
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  /* 设置行间距和列间距为20px */
  gap: 20px;
}
.d2>div {
  background: pink;
  text-align: center;
}
.d2>div:nth-child(2n){
background: yellow;
}
</style>

<div class="d2">
  <div class="d2-1">1</div>
  <div class="d2-2">2</div>
  <div class="d2-3">3</div>
  <div class="d2-4">4</div>
  <div class="d2-5">5</div>
  <div class="d2-6">6</div>
</div>

在这里插入图片描述

3.3 display:table

该元素的行为类似于 HTML 中的 <table> 元素。它定义了一个 块级别 的盒子。可以用于实现复杂的表格结构，以及对表格样式和行为的精确控制。

demo 示例：

<style>
.table {
	display: table;
	background: pink;
    border-collapse: collapse;
}
.row {
	display: table-row;
}
.cell {
	display: table-cell;
	border: 1px solid #cccccc;
}
</style>

<div class="table">
    <div class="row">
      <div class="cell">张三</div>
      <div class="cell">李四</div>
      <div class="cell">王五</div>
    </div>
    <div class="row">
      <div class="cell">张三三</div>
      <div class="cell">李四四</div>
      <div class="cell">王五五</div>
    </div>
    <div class="row">
      <div class="cell">张三三三</div>
      <div class="cell">李四四四</div>
      <div class="cell">王五五五</div>
    </div>
</div>

在这里插入图片描述

3.4 display:flow-root

该属性值用于设置元素为 块级元素，内部显示类型为建立一个新的块级格式化上下文（BFC），从而具有包含 内部浮动 、 排除外部浮动 和 阻止外边距塌陷 等相关特性。

demo示例：

<style>
.d1 {
  /* 设置该属性 包含子元素的浮动 使其占据普通文档流位置 */
	display: flow-root;
	background: #ccc;
}
.d1-1 {
	float: left;
	width: 30px;
	height: 30px;
	background: red;
}
.d1-2 {
	float: right;
	width: 40px;
	height: 40px;
	background: yellow;
}
</style>

<div class="d1">
	<div class="d1-1">
		1111
	</div>
	<div class="d1-2">
		2222
	</div>
</div>
<div class="d2">
	这是第二个盒子
</div>

在这里插入图片描述

3.5 display:flow（实验属性）

该属性值用于设置元素内部的显示类型为流式布局，使元素的布局不再受到块级元素和内联元素的限制，可以根据可用空间自动调整大小和位置，以适应不同的屏幕尺寸和布局要求。

如果该元素的外显类型为 inline 或 run-in ，并且参与了一个块级或内联格式上下文中，那么将生成一个内联盒子；否则将会生成一个块级盒子。

该属性值属性需要配合其他相关的布局属性一起使用，如 flow-orientation、flow-from 和 flow-into 等，以实现更具体的布局效果。

但是该属性值目前处于实验阶段，还未被所有的浏览器完全支持，因此不建议使用。

3.6 display:ruby（实验属性）

该属性值用于设置元素内部为 ruby 注记（ruby annotation）布局，其行为相当于HTML中的<ruby>元素。Ruby 注记是一种用于展示东亚语言中的发音、注解或翻译的特殊文本布局方式。

使用 display: ruby; 属性可以将基本文本和注音文本进行布局，并确保它们在页面上正确地显示。

但是属性目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。但 <ruby> 元素几乎被所有浏览器支持，所以更建议使用 ruby 元素。

还有其他一些与 Ruby 注记相关的属性，如 ruby-position（用于控制注音文本的位置）和 ruby-align（用于控制注音文本的对齐方式）等。

demo示例：

<p style="display: ruby;">
		<span style="display: ruby-base;">漢</span>
    <span style="display: ruby-text;">かん</span>
		<span style="display: ruby-base;">字</span>
    <span style="display: ruby-text;">じ</span>
</p>
<br><br>
<ruby>
	汉 
	<rp>(</rp><rt>han</rt><rp>)</rp> 
	字 
	<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

在这里插入图片描述

四、列表元素类

该类型的属性值用于实现列表元素的部分和样式效果。

4.1、display:list-item

该属性值用于设置元素类型为了 列表元素，外显类型为 块级元素，类似于HTML中 <ul> 内部的<li> 元素。元素在设置该属性值之后，内部会出现一个 ::marker 的伪元素，作为列表的 icon标记，我们可以结合 list-style 相关属性（list-style-position、list-style-type、list-style-image）对该标记进行操作，这些属性同样也可以操作 <ul>、<ol> 等列表元素的 icon 标记。

list-style-position 用于设置 icon 标记在元素中的位置，属性值有 outside (默认)和inside 。
list-style-type 用于设置 icon 标记的样式，常见属性值有 disc(默认)、square、decimal等等。
list-style-image 用于设置 icon 标记为一张图片，属性值为 url(...) 。

demo示例：

  <style>
    .div1-1 {
      display: list-item;
      list-style-position: outside;
      /* list-style-type 默认为disc */
      list-style-type: disc;
    }

    .div1-3 {
      display: list-item;
      list-style-position: inside;
      /* 设置列表icon为实心方块 */
      list-style-type: square;
    }

    .div1-4 {
      display: list-item;
      list-style-position: inside;
      list-style-image: url(./images/list-icon.png);
    }
  </style>

  <div class="div1">
    <div class="div1-1">
      这是第一个模拟列表元素的div
    </div>
    <div class="div1-2">
      这是一个正常的div元素
    </div>
    <div class="div1-3">
      这是第二个模拟列表元素的div
    </div>
    <div class="div1-4">
      这是第三个模拟列表元素的div
    </div>
  </div>

在这里插入图片描述

五、内部结构类

该类型的属性值用于设置各种布局 内部元素 的结构和样式。

table-row-group 该属性值用于设置元素为表格的主体内容，类似于HTML的 <tbody>。详细内容请查看：table 布局。
table-header-group 该属性值用于设置元素为表格的表头行，类似于HTML的 <thead>。详细内容请查看：table 布局。
table-footer-group 该属性值用于设置元素为表格的表尾行，类似于HTML的 <tfoot>。详细内容请查看：table 布局。
table-row 该属性值用于设置元素为表格的行，类似于HTML的 <tr>。详细内容请查看：table 布局。
table-cell 该属性值用于设置元素为表格的单元格，类似于HTML的 <td>、<th>。详细内容请查看：table 布局。
table-column-group 该属性值用于设置元素为表格的列组，类似于HTML的 <colgroup>。详细内容请查看：table 布局。
table-column 该属性值用于设置元素为表格的列，类似于HTML的 <col>。详细内容请查看：table 布局。
table-caption 该属性值用于设置元素为表格的标题，类似于HTML的 <caption>。详细内容请查看：table 布局。
ruby-base（实验属性）该属性值用于设置元素为ruby 布局的基本文本，类似于HTML的<rb>元素。该属性值目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。
ruby-text（实验属性）该属性值用于设置元素为ruby 布局的注音文本，类似于HTML的<rt>元素。该属性值目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。
ruby-base-container（实验属性）该属性值目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。
ruby-text-container（实验属性）该属性值类似于HTML的 <rtc>元素。该属性值目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。

六、元素显示类

该类型的属性值用于设置 元素及其后代元素 在页面上的显示问题。

6.1、display:none

该属性值用于设置元素及其后代元素在页面上不显示，并且不占据页面空间，但是元素的dom结构是存在的，只是不显示。Vue中的v-show语法糖就是基于该属性实现的。

如果想让元素占据空间，但是不显示，应该使用visibility或者opacity属性实现。

demo示例：

  <div class="div1" style="display: none;">
    这是第一个div
  </div>
  <div class="div2">
    这是第二个div
  </div>

结果只显示第二个div，第一个被隐藏了。
在这里插入图片描述

6.2 display:contents

🚫该属性值用于设置元素本身不显示，但其内部文本、伪元素和后代元素正常显示。但是该属性并 不建议使用，不符合大部分浏览器的规范要求。

demo示例：

<div class="div2" style="display: contents;background: yellow;">
    这是第二个div
    <div style="background: #ccc;">
      这是第二个div的子元素
    </div>
</div>

在这里插入图片描述

七、预组合类

该类型的属性值用于设置元素 同时具有两种属性值 的效果，效果类似于两者的结合。

7.1、display:inline-block

该属性值用于设置元素类型为 行内块元素 ，既可以像 inline 元素与其他行内元素放在 同一行，又可以像 block 元素一样设置 宽高、边距 等属性。

7.2、display:inline-table

该属性值用于设置元素类型为 行内表格元素 ，既可以设置元素内部为表格布局，又可以像inline 元素与其他行内元素放在同一行。

除了与其他行内元素放在同一行之外，其余特性与 table 属性值相同。

7.3、display:inline-flex

该属性值用于设置元素类型为 行内flex元素，既可以设置元素内部为 flex 布局，又可以像inline 元素与其他行内元素放在同一行。

除了与其他行内元素放在同一行之外，其余特性与 flex 属性值相同。

7.4、display:inline-grid

该属性值用于设置元素类型为 行内网格元素，既可以设置元素内部为 grid 网格布局，又可以像 inline 元素与其他行内元素放在同一行。

除了与其他行内元素放在同一行之外，其余特性与 grid 属性值相同。

demo示例：

<style>
    .div1 {
      display: inline-block;
      width: 150px;
      height: 50px;
      background: red;
    }
    .div2 {
      display: inline-table;
      width: 150px;
      height: 50px;
      background: yellow;
    }
    .row {
      display: table-row;
    }
    .cell {
      display: table-cell;
    }
    .div3 {
      display: inline-flex;
      width: 150px;
      height: 50px;
      background: pink;
    }
    .div4 {
      display: inline-grid;
      width: 150px;
      height: 50px;
      background: green;
    }
</style>

  <div>
    <div class="div1">
      这是设置inline-blick的div
    </div>
    <div class="div2">
      <div class="row">
        <div class="cell">这是设置inline-table的div</div>
      </div>
    </div>
    <div class="div3">
      这是设置inline-flex的div
    </div>
    <div class="div4">
      这是设置inline-grid的div
    </div>
  </div>