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