1. Web
  2. CSS
  3. <display-outside>

<display-outside>

<display-outside> 关键字指定元素的外部 display 类型，这本质上是它在流式布局中的角色。这些关键字用作 display 属性的值，出于历史原因可以作为单个关键字使用，也可以像 Level 3 规范中定义的那样与 <display-inside> 关键字中的值一起使用。

语法

有效的 <display-outside> 值

block

该元素生成一个块级元素框，在正常流中，该元素的前后都会生成换行符。

inline

该元素生成一个或多个内联元素框，这些框在自身前后不会生成换行符。在正常流中，如果有空间，下一个元素将位于同一行。

注意：当浏览器遇到仅包含外部 display 值（例如 display: block 或 display: inline）的 display 属性时，内部值默认为 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 Display Module Level 3
# typedef-display-outside

浏览器兼容性

css.properties.display.block

css.properties.display.inline

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.