1.display 多值语法介绍

display 属性具有相当强大的功能，除了显示某个内容与页面上其他方框的关系是块级还是行内级外，它还能显示应用该属性的方框内部的格式上下文。

为了更好地描述这种行为，display 类型被分为外部显示类型和内部显示类型两部分：

  • 外部显示类型：决定了主方框本身如何参与流程布局。
  • 内部显示类型：决定了其后代框的布局方式（被替换的元素除外，这一点比较复杂）。

例如：display: flex 变为 display: block flex，意味着外部显示类型是 block（在外部表现为块状元素），但它的子元素是按照 flex 布局呈现的。

这意味着，我们不需要设置 display: flex 来创建带有 flex 子代的块级方框，而是使用 display: block flex。我们使用 display: inline flex 代替 display: inline-flex 来创建带有 flex 子代的 inline-level 框。

有了这一变化，我们就可以讨论显示属性对子元素和周围元素的影响了。这种思维模式可以让我们更轻松地创建更可预测的布局，也更容易解释不同的布局模式及其效果。

2.display 多值语法兼容性

从 Chrome 115、Safari 15、Firefox 70 开始，现代浏览器已经支持了 display 多值语法。

全新的 display 属性_映射关系

3.display 属性常见单值 vs 多值映射

下表显示了其中一些新值与规范中的单一值（现称为传统值）之间的映射关系。

Short display

Full display

block

block flow

flow-root

block flow-root

inline

inline flow

inline-block

inline flow-root

flex

block flex

inline-flex

inline flex

grid

block grid

inline-grid

inline grid

上面表中除了 flow-root 在日常开发中经常被用到，大家应该都比较熟悉。当赋予一个元素 display: flow-root，它就会成为一个新的块格式上下文，成为一个新的正常流程的根元素。从本质上讲，这将导致浮动元素被包含在内。此外，子元素的边距会保留在容器内，而不会随父元素的边距一起折叠。如下示例：

<style>
.container {
  background-color: #000;
  padding: 10px;
  .box {
    background-color: #fff;
    color: #000;
    max-width: 500px;
    margin: 0 0 2em 0;
    padding: 1em;
    clear: left;
    & img {
      float: left;
      width: 150px;
      margin: 0 10px 10px 0;
    }
  }
  .box2 { display: flow-root;}
  & p { margin: 2em 0; color: #fff }
}
</style>
<div class="container">
  <div class="box box1">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/balloon-sq1.jpg">The image has been floated to the left. This box does not have display: flow-root.
  </div>
  <p>This paragraph follows the box which contains the float.</p>
  <div class="box box2">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/balloon-sq1.jpg">The image has been floated to the left. This box does have display: flow-root.
  </div>
  <p>This paragraph follows the box which contains the float.</p>
</div>