CSS 之 display属性详解

一、总览

CSS的 display 属性用于设置元素的显示类型，或设置其子元素的布局类型。 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、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、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>

页面表现：

在这里插入图片描述

三、内部表现类

这类属性值的效果是规定元素的内部显示类型，即定义元素内部子元素的布局方式。

1、flex

该属性值用于设置元素的内部显示类型为弹性布局，其外显类型为块级元素。该类型的元素可以通过一系列相关属性控制子元素在标准轴线上的布局方式和占位空间。更多内容可查看：flex布局。

该属性值的主要应用场景为：多个块级元素水平居中对齐等。

<style>
  .d1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccc;
  }
  .d1>div {
    width: 150px;
    height: 150px;
    margin-right: 10px;
    background: pink;
  }
</style>

<div class="d1">
  <div class="d1-1">第一个块级元素</div>
  <div class="d1-2">第二个块级元素</div>
  <div class="d1-3">第三个块级元素</div>
</div>

页面表现：

在这里插入图片描述

2、grid

该属性值用于设置元素内部的显示类型为网格布局，其外显类型为块级元素。该类型的元素将内部分为行和列，划分成一个个单元格，并通过一系列相关属性控制单元格的布局和大小。更多内容可查看：grid布局。

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

<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 class="d2-7">7</div>
  <div class="d2-8">8</div>
  <div class="d2-9">9</div>
</div>

页面表现：

在这里插入图片描述

3、table

该属性值用于设置元素为块级元素，且内部的显示类型为表格布局，具体行为类似于HTML中的<table>元素。可以用于实现复杂的表格结构，以及对表格样式和行为的精确控制。更多内容可查看：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>

页面效果：

在这里插入图片描述

4、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>

页面效果：

在这里插入图片描述

5、flow（实验属性）

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

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

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

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

6、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>

页面效果：

在这里插入图片描述

四、列表元素类

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

1、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>

页面效果：

在这里插入图片描述

五、内部结构类

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

1、table-row-group

该属性值用于设置元素为表格的主体内容，类似于HTML的<tbody>。详细内容请查看：table 布局。

2、table-header-group

该属性值用于设置元素为表格的表头行，类似于HTML的<thead>。详细内容请查看：table 布局。

3、table-footer-group

该属性值用于设置元素为表格的表尾行，类似于HTML的<tfoot>。详细内容请查看：table 布局。

4、table-row

该属性值用于设置元素为表格的行，类似于HTML的<tr>。详细内容请查看：table 布局。

5、table-cell

该属性值用于设置元素为表格的单元格，类似于HTML的<td>、<th>。详细内容请查看：table 布局。

6、table-column-group

该属性值用于设置元素为表格的列组，类似于HTML的<colgroup>。详细内容请查看：table 布局。

7、table-column

该属性值用于设置元素为表格的列，类似于HTML的<col>。详细内容请查看：table 布局。

8、table-caption

该属性值用于设置元素为表格的标题，类似于HTML的<caption>。详细内容请查看：table 布局。

9、ruby-base（实验属性）

该属性值用于设置元素为ruby 布局的基本文本，类似于HTML的<rb>元素。

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

10、ruby-text（实验属性）

该属性值用于设置元素为ruby 布局的注音文本，类似于HTML的<rt>元素。

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

11、ruby-base-container（实验属性）

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

12、ruby-text-container（实验属性）

该属性值类似于HTML的<rtc>元素。

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

六、元素显示类

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

1、none

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

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

demo示例：

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

页面效果：

在这里插入图片描述

2、contents

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

demo示例：

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

页面效果：

在这里插入图片描述

七、预组合类

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

1、inline-block

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

2、inline-table

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

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

3、inline-flex

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

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

4、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>