前言
在前端开发中，我们经常需要根据不同场景调整页面元素的显示方式，例如针对不同的设备尺寸和浏览器窗口大小进行响应式设计，或是针对不同的文件类型和链接类型显示不同的图标和样式等。而这些任务中不可避免地需要用到一些样式类名称和专业技术，往往需要消耗时间和精力。
鉴于此，开源社区中涌现了各种实用的工具和库，其中不乏对前端开发能力和效率提升有重要贡献的 NPM 包。本文介绍的 @savvy-css/display-utilities 包就是其中之一，它提供了一系列易用且通用的 CSS 样式类，帮助开发人员快速完成页面元素显示的调整和优化。
简介
@savvy-css/display-utilities 是一个基于 CSS 的 NPM 包，提供了一系列用于设置元素显示的样式类名称。这些样式类主要包括以下几种：
d-*：用于设置元素的显示方式（display）；flex-*：用于设置元素的弹性和布局方式（Flexbox）；grid-*：用于设置元素的网格布局方式（Grid）；float-*：用于设置元素的浮动方式（float）。
@d-* 样式类适用于所有元素，而其他三种样式类则适用于具有弹性布局、网格布局和浮动布局的元素。这些样式类可以通过添加不同的后缀来设置不同的属性值。例如，d-flex 表示将元素设置为弹性布局方式，d-inline-block 表示将元素设置为内联块格式。
安装使用
要在项目中使用 @savvy-css/display-utilities，需要使用 NPM 或 Yarn 安装该包，并在 HTML 或 CSS 中引入样式表。
安装
使用 NPM 进行安装：
--- ------- ----------------------------
或使用 Yarn 进行安装：
---- --- ----------------------------
引入样式表
在 HTML 文件中添加以下代码：
----- ---------------- --------------------------------------------------------------------------------
或者，在 CSS 文件中使用以下代码：
------- ---------------------------------------------------------------
使用样式类
使用样式类时，可以根据具体需求添加相应的后缀，例如：
---- ------------- ------------------------ --------- ---------- ------
上述代码表示将 <div> 元素设置为弹性布局方式，并水平居中其中包含的 <p> 元素。
示例
以下是一些使用 @savvy-css/display-utilities 包的示例代码。
d-block 和 d-none
d-block 样式类用于将元素设置为块级元素，在页面上以独立的块显示。
---- ---------------- --------- ---------- ------
d-none 样式类用于隐藏元素，不在页面上显示。
---- --------------- --------- ---------- ------
d-flex 和 justify-content-center
d-flex 样式类用于将元素设置为弹性布局方式。
---- --------------- --------- ---------- ------
justify-content-center 样式类用于将元素水平居中。
---- ------------- ------------------------ --------- ---------- ------
d-grid 和 grid-gap
d-grid 样式类用于将元素设置为网格布局方式。
---- --------------- --------- ------- --------- ------- --------- ------- ------
grid-gap 样式类用于设置元素之间的间距。
---- ------------- ---------- --------- ------- --------- ------- --------- ------- ------
float-left
float-left 样式类用于将元素向左浮动。
---- ------------------- --------- ---------- ------
结语
@savvy-css/display-utilities 是一个实用且易用的 NPM 包，它提供了一系列通用的 CSS 样式类，帮助开发人员快速完成元素显示的调整和优化。本文介绍了该包的安装和使用方法，并提供了一些示例代码帮助读者更好地了解该包的功能和作用。希望本文对读者有所帮助，在前端开发中发挥更高的效率和质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055aa981e8991b448d831e