文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

显示 | display

该displayCSS属性指定用于渲染元素框的类型。在HTML中，display值，取自用户在HTML中设定的值或来自浏览器/用户默认值。XML中的默认值是inline。

none允许您关闭元素的显示；当您使用none，所有子元素的显示也会被关闭。文档被呈现为不存在。

代码语言：javascript
复制
/* <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;

初始值

inline

适用于

所有元素

遗传

没有

媒体

所有

计算值

作为指定的值，除了定位和浮动元素和根元素。在这两种情况下，计算出的值都可能是指定的关键字以外的关键字。

动画类型

离散的

规范的顺序

形式语法定义的独特的非模糊顺序

语法

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

  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-box>
  • <display-legacy>

最好使用单个关键字来指定display; 尽管最新的CSS标准允许你组合一些关键字，但浏览器还不能很好地支持。

值

<display-outside>关键字指定元素的外部显示类型，这是它在流布局中的形态。它们被定义如下：

值

Description

块

该元素生成一个块元素框。

inline

元素生成一个或多个内联元素框。

run-in

该元素生成一个运行框。磨合元素的行为像内联或块，取决于周围的元素。即：如果运行框包含一个块框，与块相同。如果一个块盒在引入框之后，引入框成为块框的第一个嵌入框。如果是内联框，则运行框变成一个块框。

  • 如果运行框包含一个块，则与块相同。
  • 如果一个块在引入框之后，引入框成为块框的第一个嵌入框。
  • 如果是内联框，则运行框变成一个块框。

<display-inside>这些关键字指定元素的内部显示类型，它定义了布局其内容的格式化上下文的类型（假设它是非替换元素）。它们被定义如下：

值

描述

flow

该元素使用流布局（块内布局）布局其内容。如果其外部显示类型是内联或者插入，并且正在参与块或内联格式化上下文，则它会生成一个内联框。否则，它会生成一个块容器框。根据其他属性的值（例如位置，浮点数或溢出）以及它本身是否参与块或内联格式化上下文，它要么为其内容建立新的块格式上下文，要么将其内容整合到其父格式中上下文。

flow-root

该元素生成一个块元素框，建立一个新的块格式上下文。

table

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

flex

该元素的行为类似于块元素，并根据flexbox模型展示其内容。

-webkit-FLEX

别名为flex。

-moz-box / -webkit-box

根据过时的Flexbox规范，元素的行为类似于灵活的框。

grid

该元素的行为像块元素，并根据网格模型展示其内容。

subgrid

如果父元素具有display：grid，则元素本身及其内容按照网格模型进行布局。

ruby

该元素的行为像一个内联元素，并根据ruby格式化模型布局其内容。它的行为像相应的<ruby> HTML元素。

<display-listitem>

元素为内容和一个单独的列表项行内框生成一个块框。

如果未指定<display-inside>值，则主框的内部显示类型默认为flow。如果未指定<display-outside>值，则主框的外部显示类型默认为block。

<display-internal>

一些布局模型，如table和ruby，有一个复杂的内部结构，有几个不同的角色，他们的子代和后代可以填补。本节定义了那些“内部”显示值，这些值仅在特定布局模式中有意义。

除非另有规定，使用这些显示值的元素的内部显示类型和外部显示类型都设置为给定的关键字。

值

描述

table-row-group

这些元素的行为就像<tbody> HTML元素

table-header-group

这些元素的行为像<thead> HTML元素。

table-footer-group

这些元素的行为像<tfoot> HTML元素。

table-row

这些元素的行为就像<tr> HTML元素。

table-cell

这些元素的行为像<td> HTML元素。

table-column-group

这些元素的行为像<colgroup> HTML元素。

table-column

这些元素的行为像<col> HTML元素。

table-caption

这些元素的行为像<caption> HTML元素。

ruby-base

这些元素像<rb> 元素。

ruby-text

这些元素的行为像<rt>元素。

ruby-base-container

这些元素的行为就像生成为匿名框的<rbc>元素一样。

ruby-text-container

这些元素的行为像<rtc>元素。

<display-box>这些值定义元素是否生成显示框。

值

描述

contents

这些元素本身并不产生特定的盒子。他们被他们的伪箱子和他们的子箱子取代。

none

关闭元素的显示，使其对布局没有影响（文档呈现为元素不存在）。所有的后代元素也关闭了他们的显示。要使元素占用通常需要的空间，但是实际上不需要渲染任何东西，请改为使用可见性属性。

<display-legacy> CSS 2对该display属性使用了单关键字语法，要求单独的关键字用于相同布局模式的块级别和内联级别。它们被定义如下：

值

描述

inline-block

该元素生成一个块元素框，它将与周围的内容一起流动，就好像它是一个单行内嵌框（行为很像被替换的元素）。它等价于内联流根。

inline-table

内联表值在HTML中没有直接映射。它的行为像一个<table> HTML元素，但是作为一个内联框，而不是一个块级框。表格框内是一个块级的上下文。这相当于内联表格。

inline-flex

该元素的行为像一个内联元素，并根据flexbox模型展示其内容。这相当于内联flex。

-webkit-inline-flex

内联flex的别名。

-moz-inline-box / -webkit-inline-box

该元素按照过时的Flexbox规范表现得像一个内联灵活框。

inline-grid

元素的行为像一个内联元素，并根据网格模型展示其内容。

形式语法

代码语言：javascript
复制
[ <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> = list-item && <display-outside>? && [ flow | flow-root ]?
<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

实例

隐藏元素

HTML内容

代码语言：javascript
复制
<p>Visible text</p>
<p class="secret">Invisible text</p>

CSS内容

代码语言：javascript
复制
p.secret {
  display: none;
}

结果

规范

Specification

Status

Comment

CSS Display Module Level 3The definition of 'display' in that specification.

Working Draft

Added run-in, flow, flow-root, contents, and multi-keyword values.

CSS Ruby Layout Module Level 1The definition of 'display' in that specification.

Working Draft

Added ruby, ruby-base, ruby-text, ruby-base-container, and ruby-text-container.

CSS Grid LayoutThe definition of 'display' in that specification.

Candidate Recommendation

Added the grid box model values.

CSS Flexible Box Layout ModuleThe definition of 'display' in that specification.

Candidate Recommendation

Added the flexible box model values.

CSS Level 2 (Revision 1)The definition of 'display' in that specification.

Recommendation

Added the table model values and inline-block.

CSS Level 1The definition of 'display' in that specification.

Recommendation

Initial definition. Basic values: none, block, inline, and list-item.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

none, inline and block

1.0

(Yes)

1.0 (1.7 or earlier)

4.0

7.0

1.0 (85)

inline-block

1.0

(Yes)

3.0 (1.9)

5.54

7.0

1.0 (85)

list-item

1.0

(Yes)

1.0 (1.7 or earlier)

6.0

7.0

1.0 (85)

run-in

1.0 5

(Yes)

No support

8.0

7.0

1.0 (85)5

4.0 Removed in 32

5.0 (532.5) Removed in 8.0

inline-table

1.0

(Yes)

3.0 (1.9)

8.0

7.0

1.0 (85)

table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, and table-caption

1.0

(Yes)

1.0 (1.7 or earlier)

8.0

7.0

1.0 (85)

flex

21.0-webkit 29.0

(Yes)

18.0 (18.0)1 20.0 (20.0)

10-ms8 11

12.50

6.1-webkit 9.0

inline-flex

21.0-webkit

(Yes)

18.0 (18.0)1 20.0 (20.0)

10-ms8 11

12.50

6.1-webkit

grid

57

(Yes)-ms

45.0 (45.0)6

10.0-ms

44

TP

inline-grid

57

(Yes)-ms

45.0 (45.0)6

10.0-ms

44

TP

subgrid

?

No support

?

No support

?

?

ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container

?

(Yes)

34.0 (34.0)3

?

?

?

contents

587

No support

37 (37)2

No support

No support

No support

-webkit-box

(Yes)

?

45.0 (45.0)

No support

(Yes)

?

-webkit-inline-box

(Yes)

?

48.0 (48.0)

No support

(Yes)

?

-webkit-flex, -webkit-inline-flex

(Yes)

?

48.0 (48.0)

No support

(Yes)

?

flow-root

58

?

53.0 (53.0)

?

45

?

Feature

Android Webview

Chrome for Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

(Yes)

(Yes)

(Yes)

?

?

(Yes)

7.0-webkit

grid

57

57

?

?

?

44

?

inline-grid

57

57

?

?

?

44

?

flow-root

58

58

?

?

?

45

?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com