CSS 数据类型 - <display-outside>

元素的外部显示类型，在流布局中至关重要，由<display-outside> 关键字决定。display 属性使用这些关键字作为值。

可能的值

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

block：元素生成一个块级元素框，在正常流中，会在元素前后产生换行。
inline：元素生成一个或多个内联元素框，在元素前后不产生换行。如果正常流中有可用空间，则下一个元素将在同一行显示。

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

语法

<display-outside> = block | inline

CSS <display-outside> - block 值

以下示例演示了一个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>

打印页面