CSS 数据类型

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

属性值

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

  • block:元素生成一个块元素框，在正常流程中，元素框又在元素前后生成换行符。

  • inline:一个元素生成一个或多个内联元素框，这些元素框不会在元素之前或之后生成任何换行符。在正常流程中，如果有可用空间，下一个元素将位于同一行。

注意:支持二值语法，当仅指定外部值（如display: block或display: inline）时，将默认流动内部值。

语法

<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>