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 属性，不失为一个发现新大陆的方法。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]