”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 全新的显示属性。

全新的显示属性。

发布于2024-07-31
浏览:655

The All-New display Property.

从 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 有效的外部类型为blockinlinerun-in。有效的内部显示类型为 flowflow-roottableflexgrid红宝石

还有有效的单值:list-itemcontentsnone

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

以下组合现已成为旧版:inline-blockinline-tableinline-flexinline-grid 。它们可以替换为多值等价物,例如:display: inline flex.

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

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

就这样了,伙计们!

非常感谢您的阅读!

版本声明 本文转载于:https://dev.to/manojgohel/the-all-new-display-property-3572?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何使用 Eloquent 或查询生成器将多行插入数据库?
    如何使用 Eloquent 或查询生成器将多行插入数据库?
    使用 Eloquent 或 Fluent 同时插入多行此查询探讨了如何使用 Eloquent 中的单个查询将多行插入数据库(或流畅的)框架。给定的示例使用 UserSubject::where('user_id', Auth::id())->select('subject_i...
    编程 发布于2024-12-21
  • 如何在 Retrofit 中使用自定义 Gson 转换器高效提取嵌套 JSON 数据?
    如何在 Retrofit 中使用自定义 Gson 转换器高效提取嵌套 JSON 数据?
    在 Retrofit 中使用自定义 Gson 转换器提取嵌套 JSON许多 API 提供具有通用 JSON 结构的响应,其中根对象包含嵌套对象包含所需数据的“内容”字段。然而,大多数 POJO 只对“内容”字段中的数据进行建模,使得改造类型适配器无法提取并返回适当的对象。为了解决这个问题,可以开发一...
    编程 发布于2024-12-21
  • 如何使用 PHP 将字符串中的普通 URL 转换为可点击的超链接?
    如何使用 PHP 将字符串中的普通 URL 转换为可点击的超链接?
    使用 PHP 链接字符串中的 URL在 PHP 中,链接字符串中的 URL 可能是一项有用的任务,例如在文本中生成可点击链接等任务内容。一种常见的用例是将包含 URL 的纯字符串转换为具有可点击超链接的 HTML。语法:$string = preg_replace( "~[[:alph...
    编程 发布于2024-12-21
  • 为什么在 C 语言中从字符中减去“0”会显示其数值?
    为什么在 C 语言中从字符中减去“0”会显示其数值?
    解码字符值:为什么减去“0”会泄露数字表示出现一个令人费解的问题:为什么从a中减去“0” C 中的字符揭示了它所代表的数值?为了解开这个谜团,让我们深入研究一下ASCII(美国信息交换标准代码)领域,它为每个字符分配数字代码。 '0' 保留此数字序列中的第一个位置,后续字符逐渐分配更...
    编程 发布于2024-12-21
  • 如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    在 PHP 中组合关联数组在 PHP 中,将两个关联数组组合成一个数组是一项常见任务。考虑以下请求:问题描述:提供的代码定义了两个关联数组,$array1 和 $array2。目标是创建一个新数组 $array3,它合并两个数组中的所有键值对。 此外,提供的数组具有唯一的 ID,而名称可能重合。要求...
    编程 发布于2024-12-21
  • 如何启用和禁用MySQL查询审计一小时?
    如何启用和禁用MySQL查询审计一小时?
    在 MySQL 中启用查询审核如果您希望监控并记录在 MySQL 数据库上执行的所有查询一个小时,您可以可以打开审核日志记录。审核日志记录配置启用审核日志记录和转储将日志写入文件,请在 MySQL 控制台中执行以下命令:SET global log_output = 'FILE'; SET glob...
    编程 发布于2024-12-21
  • 如何使用 JavaScript 创建可悬停的选择框选项?
    如何使用 JavaScript 创建可悬停的选择框选项?
    可悬停选择框选项当前的问题涉及创建一个选择框,当将字段悬停在该选择框上时,选项说明可见,而不是单击打开options.实现为了实现此功能,我们利用了 JavaScript 方法:如下:$('#selectUl li:not(":first")').addClass('unsele...
    编程 发布于2024-12-21
  • 解析 JSON 数据时如何解决“TypeError:字符串索引必须是整数”?
    解析 JSON 数据时如何解决“TypeError:字符串索引必须是整数”?
    避免“TypeError:字符串索引必须是整数”当尝试将 JSON 文件中的数据转换为可理解的 CSV 格式时,您可能会遇到“TypeError:字符串索引必须是整数”错误。当像字典一样访问字符串的字段时,会出现此错误。让我们探索解决方案。理解错误要理解该错误,需要注意的是,Python 中的字符串...
    编程 发布于2024-12-21
  • Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta:列偏移的删除和恢复Bootstrap 4 在其 Beta 1 版本中引入了重大更改柱子偏移了。然而,随着 Beta 2 的后续发布,这些变化已经逆转。从 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    编程 发布于2024-12-21
  • 如何使用 jQuery 禁用和启用输入字段?
    如何使用 jQuery 禁用和启用输入字段?
    使用 jQuery 禁用和启用输入字段使用 HTML 表单元素时,通常需要为用户禁用或启用某些输入字段相互作用。 jQuery 提供了多种方法来完成这些任务。禁用输入字段在 jQuery 版本 1.6 及更高版本中禁用输入字段的首选方法是通过 prop( ) function:$("inp...
    编程 发布于2024-12-21
  • 在 Go 中对 App Engine 模板进行单元测试时如何解决路径问题?
    在 Go 中对 App Engine 模板进行单元测试时如何解决路径问题?
    如何在 Go 的单元测试中解决 App Engine 模板的路径规范使用 App Engine 和 Go 时,使用内置模板包可能会遇到挑战在单元测试期间。具体来说,该问题是由于服务器无法在测试环境中找到模板文件的路径而出现的。问题原因在常规应用程序执行期间,当前目录是 app.yaml 所在的应用程...
    编程 发布于2024-12-21
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSocke...
    编程 发布于2024-12-21
  • 除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换,使您能够在条件语句中直接使用其实例“t”。然而,这种显式转换提出了一个问题:“t”在哪里可以在不进行强制转换的情况下用作 bool?上下文转换场景C 标准指定了四种值可以根据上下文转换为的主要场景bool:语句:if、whi...
    编程 发布于2024-12-21
  • 如何在 PHP 中求和日期间隔?
    如何在 PHP 中求和日期间隔?
    在 PHP 中添加日期间隔在 PHP 中,我们可能会遇到需要添加两个或多个日期间隔来计算以小时和分钟为单位的总持续时间的情况。要实现此总和,我们可以按照以下步骤操作:为每个时间间隔创建 DateTime 对象。使用 diff() 方法计算每对对象之间的差异。 $a = new DateTime('1...
    编程 发布于2024-12-21
  • 如何使用 jQuery 检索“data-id”属性值?
    如何使用 jQuery 检索“data-id”属性值?
    使用 jQuery 访问 data-id 属性使用 jQuery Quicksand 插件时,通常需要检索被单击元素的“data-id”属性将信息传递到各种 Web 服务。下面介绍如何有效获取该属性值:'data-id'属性可以使用jQuery中的.attr()方法来访问。语法如下:...
    编程 发布于2024-12-21

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3