参考链接

MDN: display

CSS display

display

.container {
  display:  [ <display-outside> | <display-inside> ] |
    <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
}

display-outside

指定了元素的外部显示类型，即其在流式布局中的表现。

• block 将该元素变成块级元素
• inline 将该元素变成行内元素

display-inside

指定了元素的内部显示类型，定义了该元素内部内容的布局方式。

• flow-root 元素生成一个块元素框，它建立一个新的块格式化上下文，定义格式化根的位置。
• flex 该元素的行为类似于块元素，并根据 flexbox 模型布置其内容。
• grid 该元素的行为类似于块元素，并根据网格模型布置其内容。
• table 这些元素的行为类似于 HTML <table> 元素。 它定义了一个块级框。

display-legacy

CSS 2使用单个关键字来指定display的属性，对于相同布局模式的 block 级和 inline 级变体需要使用单独的关键字。

• inline-block 元素表现为一个内联元素
  等同于 inline flow-root。
• inline-flex 元素表现为一个内联元素，并对内容采用弹性盒子模型进行布局。
  等同于 inline flex。
• inline-grid 元素表现为一个内联元素，并对内容采用网格模型进行布局。
  等同于 inline grid。
• inline-table 元素表现为一个内联元素，盒子内部是一个块级上下文。
  等同于 inline table。

display-box

这些关键词定义一个元素到底是否产生显示盒（display boxes）。

none

关闭元素的显示，不影响布局（文件中没有该元素）。所有子项的显示也被关闭。

要一个元素占据空间（文件中存在），但不渲染，使用 visibility 属性。