从 Chrome 115 开始,CSS 显示属性有多个值。 display: flex 变为 display: block flex,display: block 变为 display: block flow。您知道的单个值现在被视为遗留值,但保留在浏览器中以实现向后兼容性。
简而言之:它改变了我们解释盒子模型等事物的方式。该规范仍然是 CR 快照,这意味着 W3C 会从实施者那里收集经验来最终确定该标准。因此,其中一些可能仍会发生变化。
重做将显示类型分为两部分:外显示类型和内显示类型。
外部显示类型决定主框本身如何参与流布局。
内部显示类型决定了其后代框的布局方式(替换元素除外,这有点复杂)。
因此 display: flex 变成了 display: block flex 意味着外部显示类型是块(它在外部表现为块元素),但其子元素根据 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 用于显示属性的多关键字值。
就这样了,伙计们!
非常感谢您的阅读!
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3