CSS 数据类型 - display-outside_CSS 菜鸟教程

元素的外部 display 类型在流布局中是必不可少的，由 <display-outside> 关键字确定。display 属性将这些关键字作为值。

可能的值

数据类型 <display-outside> 具有以下有效值：

block：块元素框由元素生成，而元素又在正常流中生成元素前后的换行符。
inline：一个或多个内联元素框由元素生成，这些元素框不会在元素之前或之后生成任何换行符。如果有空位，下一个元素将在同一行中，在正常流程中。

注意：支持 two-value 语法的浏览器，当仅指定外部值（如 display： block 或 display： inline）时，将默认内部值为 flow。

语法

 <display-outside> = block | inline

CSS <display-outside> - 块值

以下示例演示了一个 span 元素，该元素通常显示为内联，将使用关键字 block 设置为显示为块元素：

<html>
<head>
<style>
	 	.span-block {
	 	 	 display: block;
	 	 	 background-color: aqua;
	 	 	 border: 1px solid black;
	 	}
	 	.span-default {
	 	 	 background-color: peachpuff;
	 	}
</style>
</head>
<body>
	 	<h2><display-outside></h2>
	 	<div>
	 	 	 <span class="span-block">I am a span.</span> <span class="span-block">I am span displayed as block.</span>
	 	 	 <span class="span-default">I am a default inline span.</span> <span class="span-default">Inline span.</span>
	 	</div>
</body>
</html>

<< CSS 数据类型 - calc-sum CSS 数据类型 - display-internal >>