乐趣区

关于前端:现代CSS全新的-display-属性

从 Chrome 115、Safari 15、Firefox 70 开始,古代浏览器曾经反对了 display 多值语法。咱们应用的 display 单值语法曾经被视为传统值,但为了向后兼容,浏览器中仍保留了这些值。

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 多值语法。

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>

其实 display: inline-blockdisplay: flow-root 这两个值实质上是雷同的。家喻户晓,inline-block 的值会创立一个内联 flow-root,这就是为什么 display: inline-block 的新双值版本是 display: inline flow-root。它的作用与 flow-root 属性完全相同,后者在双值世界中变成了 display: block flow-root

4. 最初

呈现新的个性和性能总是令人兴奋的,在前端世界里,咱们要学会拥抱变动。最初,心愿其余浏览器也能尽快的反对多值语法,在不远的未来,咱们就能以 multi-keyword 语法来编写更有语义化的 CSS。

欢送关注「FED 实验室」微信公众号,获取更多前端热点资讯、精选文章和技术实际。

退出移动版