简介

display CSS属性指定用于元素的呈现框的类型。在 HTML 中，默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表。在 XML中，其默认值为 inline。

除了多种不同的生成的元素的盒类型，值 none 可以关闭一个元素的显示；当你使用 none 所有的后代元素他们的显示也会被关闭。文档渲染的过程中就好像在文档树中这个元素不存在一样

名称	内容
初始值	inline
适用元素	all elements
是否是继承属性	否
计算值	as the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified.
Animation type discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

Formal syntax: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
where 
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | subgrid | ruby
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

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

取值

display 属性使用关键属性值指定。 关键属性值被分为六类：

• <display-outside>
• <display-inside>
• <display-listitem>
• <display-internal>
• <display-box>
• <display-legacy>
  目前最好使用单个关键词指定 display ； 虽然最新规范允许您组合关键词，但浏览器并没有很好地支持。

display 值

是一个关键字用来限定应用到元素渲染的类型，它可能的值以及它们的含义是：

值集合	值	描述
基本值(CSS 1)	inline	关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在。要想让元素在隐藏的同时占据其原有的位置，请参见 visibility 属性。
	inline	该元素生成一个或多个行内元素盒。
	block	该元素生成一个块元素盒。
	list-item	该元素生成一个容纳内容和单独的列表行内元素盒的块状盒。
扩展值 (CSS 2.1)	inline-block	该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）
表格模型值 (CSS 2.1)	inline-table	inline-table值在HTML中没有对应元素。它的行为就像一个HTML中的table元素，但是作为内联框，而不是块级框。 表格框内是一个块级上下文。
	table	这个元素的作用就像 <table> 元素. 它定义了一个块级盒子
	table-caption	这个元素的作用的就像<caption> 一样。
	table-cell	这个元素的作用就像<td> 一样。
	table-column	这个元素的作用就像<col> 一样
Flexbox模型值 (CSS3)	flex	该元素的行为类似于块级元素，并根据Flexbox模型来描述其内容。
	inline-flex	该元素的行为类似于行内块级元素，并根据Flexbox模型来描述其内容。
栅格盒模型值 (CSS3)	grid	The element behaves like a block element and lays out its content according to the grid model.
	inline-grid	The element behaves like an inline element and lays out its content according to the grid model.