1. CSS 变量

被遗忘的 CSS

CSS，层叠样式表，是为网页添加样式的一门语言。它是现代 Web 开发的基础，用于控制网页的外观和布局。然而，CSS 是一门庞大而复杂的语言，即使是最有经验的开发人员也可能忘记一些不常用的特性。

本文重点介绍一些被遗忘的 CSS 特性，这些特性可能不经常使用，但它们具有强大的功能，可以在您的 Web 开发项目中提供帮助。

CSS 变量允许您在样式表中存储和重复使用值。这可以提高代码的可维护性和可读性。要创建 CSS 变量，请使用以下语法：

--variable-name: value;

然后，可以在样式表中使用变量，就像使用任何其他 CSS 值一样：

body {
  color: var(--text-color);
}

自适应单位是一种 CSS 单位，会根据设备的屏幕大小自动调整。这对于创建对各种设备具有响应能力的布局非常有用。自适应单位包括：

• vw： 视口宽度（1vw = 1% 视口宽度）
• vh： 视口高度（1vh = 1% 视口高度）
• vmin： 视口较小的一侧（1vmin = 1% 视口较小的一侧）
• vmax： 视口较大的一侧（1vmax = 1% 视口较大的一侧）

媒体查询允许您根据设备的特定特性（例如屏幕大小、设备类型或方向）应用不同的样式。这对于创建响应式布局和针对不同设备优化用户体验非常有用。要创建媒体查询，请使用以下语法：

@media (condition) {
  /* CSS 规则 */
}

CSS 伪元素允许您向元素添加额外的样式，而无需修改元素本身的 HTML。这对于添加装饰性元素（例如边框、阴影或背景）非常有用。常用的伪元素包括：

• ::before： 在元素内容之前添加内容
• ::after： 在元素内容之后添加内容
• ::first-letter： 对元素中的第一个字母应用样式
• ::first-line： 对元素中的第一行应用样式

CSS Grid 是一种布局模块，允许您使用网格系统轻松创建复杂的布局。CSS Grid 提供了强大的功能，例如：

• 动态调整大小： 根据内容自动调整网格单元格的大小
• 响应式设计： 根据设备屏幕大小调整网格布局
• 重叠： 允许元素重叠，创建更灵活的布局

CSS Flexbox 是另一种布局模块，可用于创建灵活且响应式的布局。Flexbox 提供了以下功能：

• 自动换行： 当空间不足时，自动将元素换行
• 对齐和分布： 轻松对齐和分布元素
• 响应式设计： 根据设备屏幕大小调整布局