显示

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

网页上的每个元素都是一个矩形框。 CSS 中的显示属性决定了该矩形框的行为方式。

span.icon {
  display: inline-block;  /* Characteristics of block, but lays out inline */
}

所有元素的默认值为 inline。 大多数“用户代理样式表”(浏览器应用于所有站点的默认样式)将许多元素重置为“block”。 让我们逐一了解这些,然后介绍一些其他不太常见的取值。

语法

display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
  • 初始值: inline
  • 应用于:所有元素
  • 继承:
  • 计算值:表示 内部外部 显示类型的关键字对,以及可选的 list-item 标志,或 <display-internal><display-box> 关键字;请参阅各种规范中的说明以了解计算规则。
  • 动画:n/a

取值

display 属性接受关键字取值。 这些关键字可以分组到不同的类别中。

/* <display-outer> (its natural flow). */
display: block;
display: inline;

/* <display-inner> (its contents) */
display: flex;
display: flow-root;
display: grid;
display: table;
display: ruby; /* experimental */

/* <display-listitem> (generates a content box and an inline list-item box) */
display: list-tem;
display: inline list-tem;

/* <display-internal> (defines table and ruby layouts) */
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; /* experimental */
display: ruby-text; /* experimental */
display: ruby-base-container; /* experimental */
display: ruby-text-container; /* experimental */

/* <display-box> (determines whether to display a box or not) */
display: contents;
display: none;

/* <display-legacy> (CSS2 single-keyword syntax) */
display: inline-block;
display: inline-flex;
display: inline-grid;
display: inline-table;

/* Two-value examples */
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;

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

示例

display: inline

元素的默认取值。 想象一下像 <span><em><b> 这样的元素,以及如何将文本包装在这些元素中,在一个文本字符串中不会破坏文本的流动。

<em> 元素具有 1px 红色边框。 请注意,它与其他文本完全 inline。

内联元素将接受边距和填充,但元素仍然会按照预期保持内联。 边距和填充只会水平地将其他元素推开,而不是垂直地推开。

内联元素不会接受 heightwidth。 它会直接忽略它们。

display: inline-block

设置为 inline-block 的元素与 inline 非常相似,因为它会与文本的自然流动(在“基线”上)设置内联。 区别在于您可以设置一个 widthheight,它们将被遵守。

display: block

浏览器 UA 样式表将许多元素设置为 block。 它们通常是容器元素,例如 <div><section><ul>。 还有文本“块”,例如 <p><h1>。 块级元素不会内联设置,而是会突破它们。 默认情况下(不设置宽度),它们会占用尽可能多的水平空间。

具有红色边框的两个元素是 <p>,它们是块级元素。 它们之间的 <em> 元素不会内联设置,因为块会向下突破内联元素。

display: run-in

首先,此属性在 Firefox 中不起作用。据称它的规范定义不够明确。为了开始理解它,就好像你想要一个标题元素与下面的文本并排显示一样。浮动它不起作用,并且其他任何方法也不起作用,因为你不想标题成为下面文本元素的子元素,你想要它是一个独立的元素。在“支持”的浏览器中,它就像这样

不过不要指望它。

display: flex

display 属性也用于 Flexbox 这样的新式布局方法。

.header {
  display: flex;
}

Flexbox 语法有一些旧版本,所以请参考这篇文章了解使用 Flexbox 的语法,并获得最佳的浏览器支持。请务必查看这Flexbox 的完整指南

display: flow-root

flow-root display 值创建一个新的“块级格式化上下文”,但其他方面类似于 block。一个新的 BFC 有助于清除浮动,从而不再需要 hack 来实现这一点。

.group {
  display: flow-root
}

display: grid

CSS 网格布局最初由display属性设置。

body {
  display: grid;
}

查看 我们的 CSS Grid 完整指南

display: none

完全从页面中移除元素。请注意,虽然元素仍然在 DOM 中,但它在视觉上以及其他所有可想的方式都被移除(您无法使用 Tab 键切换到它或它的子元素,屏幕阅读器会忽略它,等等)。

display: contents

此值会导致元素的子元素显示为好像它们是元素父元素的直接子元素,忽略元素本身。当包装元素在使用 CSS Grid 或类似布局技术时应该被忽略时,这可能很有用。

.element {
  display: contents;
}

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本起支持该功能。

台式机

ChromeFirefoxIEEdgeSafari
438123.1

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271272.13.2