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>
1
2
3
4
5
6
7
8
9
10
11
12

页面表现：

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

页面表现：

三、内部表现类

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

页面表现：

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">1div>
  <div class="d2-2">2div>
  <div class="d2-3">3div>
  <div class="d2-4">4div>
  <div class="d2-5">5div>
  <div class="d2-6">6div>
  <div class="d2-7">7div>
  <div class="d2-8">8div>
  <div class="d2-9">9div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

页面表现：

3、table

​ 该属性值用于设置元素为块级元素，且内部的显示类型为表格布局，具体行为类似于HTML中的

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

页面效果：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

页面效果：

5、flow（实验属性）

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

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

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

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

6、ruby（实验属性）

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

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

​ 但是属性目前处于实验阶段，还未被所有的浏览器完全支持，目前只有Firefox和IE浏览器支持该属性，因此不建议使用。但元素几乎被所有浏览器支持，所以更建议使用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>hanrt><rp>)rp> 
	字 
	<rp>(rp><rt>zirt><rp>)rp>
ruby>
1
2
3
4
5
6
7
8
9
10
11
12
13

页面效果：

四、列表元素类

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

1、list-item

​ 该属性值用于设置元素类型为了列表元素，外显类型为块级元素，类似于HTML中

内部的
• 元素。元素在设置该属性值之后，内部会出现一个::marker的伪元素，作为列表的icon标记，我们可以结合list-style相关属性（list-style-position、list-style-type、list-style-image）对该标记进行操作，这些属性同样也可以操作
  、
  等列表元素的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
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36

  页面效果：

  

  五、内部结构类

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

  1、table-row-group

  ​ 该属性值用于设置元素为表格的主体内容，类似于HTML的

2、table-header-group

​ 该属性值用于设置元素为表格的表头行，类似于HTML的

3、table-footer-group

​ 该属性值用于设置元素为表格的表尾行，类似于HTML的

4、table-row

​ 该属性值用于设置元素为表格的行，类似于HTML的

5、table-cell

​ 该属性值用于设置元素为表格的单元格，类似于HTML的

7、table-column

​ 该属性值用于设置元素为表格的列，类似于HTML的

8、table-caption

​ 该属性值用于设置元素为表格的标题，类似于HTML的

  <div class="div1" style="display: none;">
    这是第一个div
  div>
  <div class="div2">
    这是第二个div
  div>
1
2
3
4
5
6

<div class="div2" style="display: contents;background: yellow;">
    这是第二个div
    <div style="background: #ccc;">
      这是第二个div的子元素
    div>
div>
1
2
3
4
5
6

<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的divdiv>
      div>
    div>
    <div class="div3">
      这是设置inline-flex的div
    div>
    <div class="div4">
      这是设置inline-grid的div
    div>
  div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49