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-outside/index.html | 85 ++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 files/zh-cn/web/css/display-outside/index.html (limited to 'files/zh-cn/web/css/display-outside') diff --git a/files/zh-cn/web/css/display-outside/index.html b/files/zh-cn/web/css/display-outside/index.html new file mode 100644 index 0000000000..ee95363595 --- /dev/null +++ b/files/zh-cn/web/css/display-outside/index.html @@ -0,0 +1,85 @@ +--- +title: +slug: Web/CSS/display-outside +translation_of: Web/CSS/display-outside +--- +
{{CSSRef}}
+ +

The <display-outside> keywords specify the element’s outer {{CSSxRef("display")}} type, which is essentially its role in flow layout. These keywords are used as values of the display property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the {{CSSxRef("<display-inside>")}} keywords.

+ +

语法

+ +

 <display-outside> 的可用值：

+ +
+
block
+
这个值会生成一个块级元素盒子，同时在该元素之前和之后打断（换行）。简单来说就是，这个值会将该元素变成块级元素。
+
inline
+
这个值会生成一个行内元素盒子，该元素之前和之后不会打断（换行）。如果空间充足，该元素后的元素将会在同一行显示。简单来说就是，这个值会将该元素变成行内元素。
+
run-in {{Experimental_Inline}}
+
这个值生成一个run-in盒子。如果其后的兄弟元素是块级盒子，那么这个run-in盒子就会以兄弟元素的第一个行内元素盒子的形式存在；如果其后的兄弟元素是行内元素，那么这个run-in盒子会变成块级元素。
+
run-in元素的存在形式取决于相邻的元素，如果它的内部存在block box，那么它会变成块级元素盒子。
+
+ +
+

Note: Browsers that support the two value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.

+
+ +

举例

+ +

In the following example, span elements (normally displayed as inline elements) are set to display: block and so break onto new lines and expand to fill their container in the inline dimension.

+ +

HTML

+ +
<span>span 1</span>
+<span>span 2</span>
+ +

CSS

+ +
span {
+    display: block;
+    border: 1px solid rebeccapurple;
+}
+ +

Result

+ +

{{EmbedLiveSample("Examples", 300, 60)}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('CSS3 Display', '#typedef-display-outside', 'display-outside')}}{{Spec2('CSS3 Display')}}
+ +

浏览器兼容性

+ + + +

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

+ +

其它

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