全新的显示属性。

从 Chrome 115 开始，CSS 显示属性有多个值。 display: flex 变为 display: block flex，display: block 变为 display: block flow。您知道的单个值现在被视为遗留值，但保留在浏览器中以实现向后兼容性。

为什么迟到这么久？

简而言之：它改变了我们解释盒子模型等事物的方式。该规范仍然是 CR 快照，这意味着 W3C 会从实施者那里收集经验来最终确定该标准。因此，其中一些可能仍会发生变化。

重做将显示类型分为两部分：外显示类型和内显示类型。

外部显示类型决定了主框本身如何参与流布局。

内部显示类型决定了其后代框的布局方式（替换元素除外，这有点复杂）。

因此 display: flex 变成了 display: block flex 意味着外部显示类型是 block（它在外部表现为块元素），但其子元素根据 flex 布局进行渲染。

这与之前的行为相同，但是通过此更改，我们可以讨论 display 属性对子元素和周围元素的影响。在我看来，这种心理模型可以更轻松地创建更可预测的布局，并且更简单地解释不同的布局模式及其效果。

在较新的课程或教程中，对盒子模型的良好解释不仅需要涵盖边距、边框、填充、宽度和高度，还需要涵盖盒子大小和显示属性。

显示属性的有效值是什么？

正如已经提到的，一些旧房产现在已经成为遗产。以下是所有有效属性：

对于多值语法显示：outer-type inside-type 有效的外部类型为 block、inline 和 run-in。有效的内部显示类型为 flow、flow-root、table、flex、grid 和 红宝石。

还有有效的单值：list-item、contents 和 none。

最重要的是，CSS 有一些仍然有效的内部显示值。使用表格或 ruby​​ 显示类型时将计算这些值。

以下组合现已成为旧版：inline-block、inline-table、inline-flex 和 inline-grid 。它们可以替换为多值等价物，例如：display: inline flex。

最新版本的现代浏览器支持多值：https://caniuse.com/mdn-css_properties_display_multi-keyword_values

Caniuse 用于显示属性的多关键字值。

就这些了，各位！

非常感谢您的阅读！

以上是全新的显示属性。的详细内容。更多信息请关注PHP中文网其他相关文章！