From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/display/index.html | 231 +++++++++++++++++++++++++++++++++ 1 file changed, 231 insertions(+) create mode 100644 files/zh-cn/web/css/display/index.html (limited to 'files/zh-cn/web/css/display/index.html') diff --git a/files/zh-cn/web/css/display/index.html b/files/zh-cn/web/css/display/index.html new file mode 100644 index 0000000000..937e70a48d --- /dev/null +++ b/files/zh-cn/web/css/display/index.html @@ -0,0 +1,231 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS +translation_of: Web/CSS/display +--- +
{{CSSRef}} +

display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。

+
+ +

在 CSS 规范（特指 CSS Level 1/2/3 规范）中查阅 display 属性的所有取值时需要注意：个别取值的详细信息记录在独立的规范中。 例如，display: flex 的详细信息在 CSS Flexible Box Model 规范中记录。可以在本文档末尾的表格中查看所有有关的规范。

+ +

语法

+ +

display 属性使用关键字取值来指定，关键字取值被分为六类：

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

Outside

+ +
+
{{CSSxRef("<display-outside>")}}
+
这些关键字指定了元素的外部显示类型，实际上就是其在流式布局中的角色（即在流式布局中的表现）。
+
{{page("/zh-CN/docs/Web/CSS/display-outside", "Syntax")}}
+
+

Inside

+
+
{{CSSxRef("<display-inside>")}}
+
这些关键字指定了元素的内部显示类型，它们定义了该元素内部内容的布局方式（假定该元素为非替换元素 non-replaced element）。
+
{{page("/zh-CN/docs/Web/CSS/display-inside", "Syntax")}}
+
+

List Item

+
+
{{CSSxRef("<display-listitem>")}}
+
将这个元素的外部显示类型变为 block 盒，并将内部显示类型变为多个 list-item inline 盒。
+
{{page("/zh-CN/docs/Web/CSS/display-listitem", "Syntax")}}
+
+

Internal

+
+
{{CSSxRef("<display-internal>")}}
+
有些布局模型（如 table 和 ruby）有着复杂的内部结构，因此它们的子元素可能扮演着不同的角色。这一类关键字就是用来定义这些“内部”显示类型，并且只有在这些特定的布局模型中才有意义。
+
{{page("/en-US/docs/Web/CSS/display-internal", "Syntax")}}
+
+

Box

+
+
{{CSSxRef("<display-box>")}}
+
这些值决定元素是否使用盒模型。
+
{{page("/en-US/docs/Web/CSS/display-box", "Syntax")}}
+
+

Legacy

+
+
{{CSSxRef("<display-legacy>")}}
+
CSS 2 对于 display 属性使用单关键字语法，对于相同布局模式的 block 级和 inline 级变体需要使用单独的关键字。
+
{{page("/en-US /docs/Web/CSS/display-legacy", "Syntax")}}
+
+ +

是否该继续使用 Legacy 取值？

+ +

CSS Level 3 规范详细说明了 display 属性的两类取值——显式地指定了外部和内部显示属性的规范——但是还没有被浏览器广泛支持。

+ +

{{CSSxRef("<display-legacy>")}} 方法允许使用单个关键字达到相同效果，开发者应该在双关键字取值被广泛支持之前采用这个方法。举例来说，你可以这样指定 inline flex 容器：

+ +
.container {
+    display: inline-flex;
+}
+ +

也可以用两个关键字来指定。

+ +
.container {
+    display: inline flex;
+}
+
+ +

有关规范变更的更多信息，查阅文章 Adapting to the new two-value syntax of display。

+ +

全局设置

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

指南和示例

+ +

上面 {{anch("语法")}} 部分提供了 display 取值的多个示例。下面的资料将详细介绍 display 的各个取值。

+ + + +

CSS Flow Layout (display: block, display: inline)

+ + + +

display: flex

+ + + +

display: grid

+ + + +

除此之外，你可以在 MDN 上找到布局模型的详细解释：

+ + + +

可访问性相关

+ +

display: none;

+ +

将 display 设置为 none 会将元素从 可访问性树 accessibility tree 中移除。这会导致该元素及其所有子代元素不再被屏幕阅读技术 screen reading technology 访问。

+ +

如果你只是想从视觉上隐藏这个元素，对可访问性更加友好的做法是使用 属性组合 来将其从屏幕上隐藏，但仍可以被屏幕阅读器 screen readers  等辅助技术解析。

+ +

display: contents;

+ +

当前大多数浏览器对 display: contents; 的实现是：将设置了该值的元素从 可访问性树 accessibility tree 中移除，但保留其子代元素。这会导致该元素自身不再被屏幕阅读技术 screen reading technology  访问。这在 CSS 规范 中被视为不正确的行为。

+ + + +

Tables

+ +

将 {{HTMLElement("table")}} 元素的 display 值修改为 block, grid, 或 flex 会修改其在 可访问性树 accessibility tree 中的表现，这会使得 table 元素不能被屏幕阅读技术正常处理。

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}新增 run-in, flow, flow-root, contents, 以及多关键字取值。
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}{{Spec2('CSS3 Ruby')}}新增 ruby, ruby-base, ruby-text, ruby-base-container, 和 ruby-text-container。
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}{{Spec2('CSS3 Grid')}}新增 grid 盒模型的值。
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}新增 flexible 盒模型的值。
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}新增 table 模型的值和 inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}初始定义.，基础值： none, block, inline, 以及 list-item.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.display", 10)}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf