<display-outside>

<display-outside> 关键字指定元素的外部 display 类型，本质上是其在流布局中的作用。这些关键字用作 display 属性的值，可以用于传统目的作为单个关键字，也可以根据第 3 级规范与来自 <display-inside> 关键字的值一起使用。

语法

有效的 <display-outside> 值

block

元素生成一个块元素框，在普通流中，在元素前后都会产生换行。

inline

元素生成一个或多个内联元素框，这些框不会在自身前后产生换行。在普通流中，如果存在空间，下一个元素将位于同一行。

注意： 当浏览器遇到仅具有 外部 display 值的 display 属性（例如，display: block 或 display: inline）时，内部值默认为 flow（例如，display: block flow 和 display: inline flow）。这与单关键字语法向后兼容。

正式语法

<display-outside> = 
  block   |
  inline  |
  run-in

示例

在以下示例中，span 元素（通常显示为内联元素）被设置为 display: block，因此它们会换行并扩展以在内联维度上填充其容器。

HTML

html
<span>span 1</span> <span>span 2</span>

CSS

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

结果

规范

规范
CSS 显示模块第 3 级
# typedef-display-outside

浏览器兼容性

css.properties.display.block

BCD 表仅在浏览器中加载

css.properties.display.inline

BCD 表仅在浏览器中加载

另请参阅