display 属性的含义

display 属性可以设置元素的内部和外部显示类型。元素的外部显示类型将决定该元素在流式布局中的表现。元素的内部显示类型可以控制其子元素的布局。

CSS3规范详细说明了 display 属性的两个值—显式地启用外部和内部显示类型的规，但是浏览器还没有很好地支持这一点。

display 属性语法

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
/* legacy values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline-flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: unset;

分类

外部显示类型

这些关键字指定元素的外部显示类型，它本质上是元素在流布局中的角色。

block

元素生成块元素框，在正常流中生成元素前后的换行符。

inline

元素生成一个或多个内联元素框，这些内联元素框不会在它们之前或之后生成换行符。在正常流中，如果有空间，下一个元素将在同一行上。

内部显示类型

flow-root

元素生成一个块元素框，该框建立一个新的块格式化上下文（BFC），定义格式化根所在的位置。

table

这些元素的行为类似于HTML <table> 元素。它定义了一个块级框。

flex

元素的行为类似于块元素，并根据弹性盒子（flexbox）模型布局其内容。

grid

元素的行为类似于块元素，并根据网格模型（grid model）布局其内容。

列表项

list-item

使元素表现的像一个列表项。

内部选项

一些标签的默认display属性

display html标签
table-row-group <tbody>
table-header-group <thead>
table-footer-group <tfoot>
table-row <tr>
table-cell <td>
table-column-group <colgroup>
table-column <col>
table-caption <caption>

盒

contents

伪元素

none

关闭元素的显示，使其对布局没有影响。

遗留

由于CSS2对display属性采用了单关键字语法，对于相同布局模式的块级和内联级变体，需要单独的关键字。

inline-block

相当于 inline flow-root

inline-table

相当于 inline table

inline-flex

相当于 inline flex

inline-grid

相当于 inline grid

全局

1
2
3
4
5
6
{
    /* Global values */
    display: inherit;
    display: initial;
    display: unset;
}