1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 值
  5. <display-outside>

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

<display-outside>

基线 广泛可用

自 2015年7月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

<display-outside> 关键字指定了元素的外侧显示（display）类型，即元素在流式布局中的角色。这些关键字用作 display 属性的值，且有作为单个关键字的旧式用法，或按第 3 级规范的定义与 <display-inside> 关键字中的值一同使用。

语法

有效的 <display-outside> 值：

block

元素生成块级元素盒，且在正常流中时，在元素前后均生成断行。

inline

元素生成至少一个行级元素盒，这些盒子不在自身前后生成断行。在正常流中，若有空格则下一元素将在同一行上。

备注：支持二值语法的浏览器在仅找到外侧值时（如指定 display: block 或 display: inline 时）会将内侧值设置为 flow，由此产生预期行为。例如若将元素指定为 block，你会期望此元素的子元素会参与块向和行向的正常流布局。

示例

在下列示例中，片段元素（通常显示为行级元素）设置为 display: block，故元素断入新行且在行向上扩张填充其容器。

HTML

html
<span>片段 1</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 上查看此页面 • 报告此内容的问题