Web前端入门第 27 问：你知道 CSS 被浏览器分为了几大类吗？

埋头苦写多年的 CSS，从没注意到 CSS 被浏览器分了类，直到偶然的一次翻阅开发者工具，才发现原来 CSS 属性也被浏览器归类收纳了。

Chrome

下面是 Chrome 的开发者工具中 CSS 的属性归类截图，一般情况都不会注意它，毕竟代码不出问题，谁会关心 CSS 属性是哪一类？

当我偶然看到的时候，也来了一句“原来还有这？”

1. Layout（布局）

控制元素在页面上的排列和定位，就是把元素摆在正确位置，别乱跑。

• 常见属性：
  • display：控制元素的显示方式（如block、inline、flex、grid等）。
  • position：设置元素的定位方式（如static、relative、absolute、fixed等）。
  • float：使元素浮动到左侧或右侧。
  • clear：清除浮动。
  • z-index：控制元素的堆叠顺序。

2. Text（文本）

控制文本的样式和排版，和文字相关的都归为这一类。

• 常见属性：
  • font-family：设置字体。
  • font-size：设置字体大小。
  • font-weight：设置字体粗细（如normal、bold等）。
  • text-align：设置文本对齐方式（如left、center、right等）。
  • line-height：设置行高。
  • text-decoration：设置文本装饰（如underline、line-through等）。
  • color：设置文本颜色。

3. Appearance（外观）

控制元素的外观样式，把盒子装饰好看一点。

• 常见属性：
  • background：设置背景颜色或图片。
  • border：设置边框样式、宽度和颜色。
  • border-radius：设置边框圆角。
  • box-shadow：设置元素的阴影效果。
  • opacity：设置元素的透明度。
  • outline：设置元素的外轮廓。

4. Animation（动画）

控制元素的动画效果，让元素灵动起来。

• 常见属性：
  • animation：定义动画的名称、持续时间、延迟、迭代次数等。
  • @keyframes：定义动画的关键帧。
  • transition：定义元素在不同状态之间的过渡效果（如颜色、大小等的变化）。
  • transform：对元素进行旋转、缩放、倾斜或平移等变换。

5. CSS Variables（CSS变量）

定义可重用的CSS变量，便于统一管理和维护样式，估计这是借鉴了 Sass / Less 等 CSS 预处理器的思想。

• 常见属性：
  • --variable-name：定义自定义属性（变量）。
  • var(--variable-name)：使用自定义属性。

6. Grid（网格布局）

用于创建复杂的二维布局，被称为 CSS 布局终极方案，核武器一般的存在。

• 常见属性：
  • display: grid：将元素设置为网格容器。
  • grid-template-columns：定义网格的列。
  • grid-template-rows：定义网格的行。
  • grid-gap：设置网格之间的间距。
  • grid-column 和 grid-row：控制网格项在网格中的位置。

7. Flex（弹性布局）

用于创建一维布局，适合灵活的、响应式的布局设计，夹在 Layout 和 Grid 之间，有点不上不下的意思，反正能用。

• 常见属性：
  • display: flex：将元素设置为弹性容器。
  • flex-direction：设置主轴方向（如row、column等）。
  • justify-content：设置主轴上的对齐方式。
  • align-items：设置交叉轴上的对齐方式。
  • flex-wrap：控制子元素是否换行。
  • flex-grow、flex-shrink、flex-basis：控制子元素的伸缩行为。

8. Table（表格）

控制表格及其内容的样式，曾经用于页面布局的手段之一，如今主要用于数据显示的场景。

• 常见属性：
  • border-collapse：设置表格边框是否合并。
  • border-spacing：设置表格单元格之间的间距。
  • caption-side：设置表格标题的位置。
  • table-layout：设置表格的布局算法（如auto、fixed）。

9. Generated Content（生成内容）

通过 CSS 生成内容，通常与伪元素一起使用，生成一些不在页面上显示的内容，比如代码行数、图标等。

• 常见属性：
  • content：与::before和::after伪元素一起使用，插入生成的内容。
  • quotes：设置引号的样式。
  • counter-reset 和 counter-increment：用于创建和管理计数器。

10 Other（其他）

包含一些不属于上述类别的CSS属性。

• 常见属性：
  • cursor：设置鼠标指针的样式。
  • overflow：控制内容溢出时的处理方式。
  • visibility：控制元素的可见性。
  • clip 和 clip-path：裁剪元素的显示区域。
  • filter：应用滤镜效果（如模糊、灰度等）。

总结

通过查看浏览器开发者工具，可以了解 CSS 属性的归类情况，从而更快地找到需要的属性。也可从类别中发现一些不常用的 CSS 属性，不失为一个发现新大陆的方法。