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 属性，不失为一个发现新大陆的方法。