CSS display属性详解

引言

CSS（层叠样式表）是一种用于描述网页外观和样式的标记语言。作为前端开发者，我们经常使用CSS来设计并美化网页。在CSS中，display属性被广泛用于控制元素的显示方式。本文将详细介绍display属性的各种取值及其对元素的影响。

display属性概述

display属性用于定义一个元素的显示方式。它决定了元素生成框类型的类型，并且影响到元素在文档流中的位置和行为。

display的取值有很多种，每个值都有其独特的作用和特点。下面将逐一介绍常用的display取值。

`none`

none是display属性的一个特殊取值。当一个元素的display值设置为none时，该元素将被隐藏，即不会在页面中显示出来，并且不占用任何空间。其他元素将会填补该元素原本的位置。

示例代码：

<div style="display: none;">这是一个隐藏的元素</div>

`block`

block是display属性的默认值。元素设置为block时，将会以块级元素的方式在文档中生成一个独立的框。

特点：

默认情况下，每个block级元素都会显示在新的一行。
可以设置width，height以及margin和padding等属性。
block元素会充满父容器的宽度，如果没有设置宽度，则会自动扩展到可用空间的最大宽度。

示例代码：

<div style="display: block; width: 200px; height: 100px; background-color: red;">这是一个块级元素</div>

`inline`

inline是display属性的另一个常用值。元素设置为inline时，会以行内元素的方式显示。

特点：

默认情况下，每个inline元素都会在同一行显示。
width和height属性对inline元素无效，只能通过padding和margin来控制元素的间距。
inline元素根据其内容的大小自动调整宽度，并且不会强制换行。

示例代码：

<span style="display: inline; background-color: yellow;">这是一个行内元素</span>
<span style="display: inline; background-color: green;">这是另一个行内元素</span>

`inline-block`

inline-block是display属性的一个特殊值，它结合了block和inline的特点。元素设置为inline-block时，会以行内块级元素的方式显示。

特点：

inline-block元素会在同一行显示，但是可以设置width和height属性。
可以通过设置padding和margin来控制元素的间距。
inline-block元素保留了块级元素的特点，可以设置宽度和高度，并且可以在内容不换行的情况下调整大小。

示例代码：

<div style="display: inline-block; width: 200px; height: 100px; background-color: blue;">这是一个行内块级元素</div>

`flex`

flex是一种新的display属性取值，它是CSS3中引入的一种布局方式。

特点：

可以通过设置display: flex来将一个容器元素设置为弹性容器，里面的子元素将成为弹性项目。
弹性容器可以通过设置justify-content和align-items等属性来控制弹性项目的对齐和排列方式。
弹性项目可以通过设置order属性来改变排列顺序。
弹性项目可以根据父容器的空间自动调整自己的宽度和高度。

示例代码：

<div style="display: flex; justify-content: space-between;">
    <span>项目1</span>
    <span>项目2</span>
    <span>项目3</span>
</div>

`grid`

grid是另一种新的display属性取值，也是CSS3中引入的一种布局方式。

特点：

可以通过设置display: grid来将一个容器元素设置为网格容器，里面的子元素将成为网格项目。
网格容器可以通过设置grid-template-columns和grid-template-rows等属性来定义网格的列和行。
网格项目可以通过设置grid-column和grid-row等属性来定义项目在网格中的位置。
网格容器可以通过设置justify-items和align-items等属性来控制网格项目在网格单元格中的对齐方式。

示例代码：

<div style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 100px;">
    <div style="grid-column: 1 / 3; background-color: red;">项目1</div>
    <div style="background-color: blue;">项目2</div>
    <div style="background-color: green;">项目3</div>
</div>

不常用的display取值

除了上面介绍的常用display取值外，CSS还提供了一些不太常用但有特殊用途的取值。

`table`

将一个元素的display值设置为table时，该元素将以表格的方式显示。

特点：

元素将以表格的形式显示，包括表头和表格内容。
可以通过设置display: table-row和display: table-cell来定义表格行和单元格。

示例代码：

<div style="display: table;">
    <div style="display: table-row;">
        <div style="display: table-cell; background-color: gray;">表头1</div>
        <div style="display: table-cell; background-color: gray;">表头2</div>
        <div style="display: table-cell; background-color: gray;">表头3</div>
    </div>
    <div style="display: table-row;">
        <div style="display: table-cell;">内容1</div>
        <div style="display: table-cell;">内容2</div>
        <div style="display: table-cell;">内容3</div>
    </div>
</div>

`table-cell`

将一个元素的display值设置为table-cell时，该元素将以表格单元格的方式显示。

特点：

元素将作为表格中的一个单元格。
表格单元格会自动填充到和其他单元格一样的高度和宽度。

示例代码：

<div style="display: table;">
    <div style="display: table-row;">
        <div style="display: table-cell;">表格单元格1</div>
        <div style="display: table-cell;">表格单元格2</div>
        <div style="display: table-cell;">表格单元格3</div>
    </div>
</div>

`table-row`

将一个元素的display值设置为table-row时，该元素将以表格行的方式显示。

特点：

元素将作为表格中的一行。
表格行会自动调整到和其他行一样的高度。

示例代码：

<div style="display: table;">
    <div style="display: table-row;">
        <div style="display: table-cell;">表格单元格1</div>
        <div style="display: table-cell;">表格单元格2</div>
        <div style="display: table-cell;">表格单元格3</div>
    </div>
    <div style="display: table-row;">
        <div style="display: table-cell;">表格单元格4</div>
        <div style="display: table-cell;">表格单元格5</div>
        <div style="display: table-cell;">表格单元格6</div>
    </div>
</div>

`table-header-group`

将一个元素的display值设置为table-header-group时，该元素将以表格头部的方式显示。

特点：

元素将作为表格的头部部分，会显示在表格前面。
可以通过设置display: table-row和display: table-cell来定义表格头部的行和单元格。

示例代码：

<div style="display: table;">
    <div style="display: table-header-group;">
        <div style="display: table-row;">
            <div style="display: table-cell; background-color: gray;">表头1</div>
            <div style="display: table-cell; background-color: gray;">表头2</div>
            <div style="display: table-cell; background-color: gray;">表头3</div>
        </div>
    </div>
    <div style="display: table-row;">
        <div style="display: table-cell;">表格内容1</div>
        <div style="display: table-cell;">表格内容2</div>
        <div style="display: table-cell;">表格内容3</div>
    </div>
</div>

`table-footer-group`

将一个元素的display值设置为table-footer-group时，该元素将以表格底部的方式显示。

特点：

元素将作为表格的底部部分，会显示在表格后面。
可以通过设置display: table-row和display: table-cell来定义表格底部的行和单元格。

示例代码：

<div style="display: table;">
    <div style="display: table-row;">
        <div style="display: table-cell;">表格内容1</div>
        <div style="display: table-cell;">表格内容2</div>
        <div style="display: table-cell;">表格内容3</div>
    </div>
    <div style="display: table-footer-group;">
        <div style="display: table-row;">
            <div style="display: table-cell; background-color: gray;">表尾1</div>
            <div style="display: table-cell; background-color: gray;">表尾2</div>
            <div style="display: table-cell; background-color: gray;">表尾3</div>
        </div>
    </div>
</div>

`table-column`

将一个元素的display值设置为table-column时，该元素将以表格列的方式显示。

特点：

元素将作为表格中的一列，会显示在其他元素的左侧。

示例代码：

<div style="display: table;">
    <div style="display: table-column;"></div>
    <div style="display: table-column;"></div>
    <div style="display: table-column;"></div>
    <div style="display: table-row;">
        <div style="display: table-cell;">表格内容1</div>
        <div style="display: table-cell;">表格内容2</div>
        <div style="display: table-cell;">表格内容3</div>
    </div>
</div>

`table-column-group`

将一个元素的display值设置为table-column-group时，该元素将以表格列组的方式显示。

特点：

元素将作为表格的列组。
可以通过设置display: table-column来定义列组中的列。

示例代码：

<div style="display: table;">
    <div style="display: table-column-group;">
        <div style="display: table-column;"></div>
        <div style="display: table-column;"></div>
    </div>
    <div style="display: table-row;">
        <div style="display: table-cell;">表格内容1</div>
        <div style="display: table-cell;">表格内容2</div>
    </div>
</div>