1.Web前端入门第1问：英语是否很重要？有哪些前置条件？
2.Web前端入门第2问：前端开发是什么？与后端、全栈的区别是什么？一个完整的Web项目有哪些角色参与？
3.Web前端入门第3问：前端需要学习哪些技术？
4.Web前端入门第4问：HTML、CSS、JavaScript 的作用分别是什么？
5.Web前端入门第 5 问：写一个 Hello, World! 踹开程序开发的大门
6.Web前端入门第 6 问：HTML 的基础语法结构
7.Web前端入门第 7 问：HTML 标签不闭合、乱闭合、只有闭合标签有没有什么问题？
8.Web前端入门第 8 问：HTML <!DOCTYPE> 申明有何用处？如果没有此申明有什么问题？
9.Web前端入门第 9 问：HTML 块级元素，内联块元素，内联元素三者有什么区别？
10.Web前端入门第 10 问：HTML 段落标签（ <p> ）嵌套段落标签（ <p> ）的渲染结果会怎样？
11.Web前端入门第 11 问：HTML 常用标签有多少？全量标签有多少？
12.Web前端入门第 12 问：HTML 常用属性一览
13.Web前端入门第 13 问：HTML 标签和属性是否区分大小写？
14.Web前端入门第 14 问：HTML 语义化是什么？
15.Web前端入门第 15 问：学会查阅 HTML 文档
16.Web前端入门第 16 问：学会使用开发者工具调试 HTML 页面
17.Web前端入门第 17 问：前端开发编辑器及插件推荐
18.Web前端入门第 18 问：CSS 入门功法【内联样式基础语法】
19.Web前端入门第 19 问：CSS 入门功法【内部样式表基础语法】
20.Web前端入门第 20 问：CSS 入门功法【外部样式表基础语法】
21.Web前端入门第 21 问：CSS 最佳位置放在哪个标签中？
22.Web前端入门第 22 问：CSS 选择器一览
23.Web前端入门第 23 问：CSS 选择器的优先级
24.Web前端入门第 24 问：CSS 单位
25.Web前端入门第 25 问：CSS 中 11 种颜色写法
26.Web前端入门第 26 问：CSS 浏览器兼容性怎么查？
27.
Web前端入门第
27 问：你知道 CSS 被浏览器分为了几大类吗？
28.Web前端入门第 28 问：你知道使用率超过 50% 的 CSS 属性有多少吗？
29.Web前端入门第 29 问：CSS 盒模型：网页布局的基石
30.Web前端入门第 30 问：CSS 文本与字体样式常用属性
31.Web前端入门第 31 问：CSS background 元素背景图用法全解
32.Web前端入门第 32 问：CSS background 元素渐变背景用法全解
33.Web前端入门第 33 问：CSS 元素外观常用属性（边框、阴影、轮廓、透明度）
34.Web前端入门第 34 问：CSS 常见布局
35.Web前端入门第 35 问：CSS 细说 flex 弹性盒子布局（多图）
36.Web前端入门第 36 问：多图细说 CSS grid 网格布局（一）父元素容器相关属性
37.Web前端入门第 37 问：多图细说 CSS grid 网格布局（二）子元素相关属性
38.Web前端入门第 38 问：CSS flex 弹性盒子与 grid 网格布局区别及应用场景
39.Web前端入门第 39 问：细说 CSS position 定位布局
40.Web前端入门第 40 问：CSS float 浮动布局应用场景
41.Web前端入门第 41 问：神奇的 transform 改变元素形状，matrix3d 矩阵变换算法演示
42.Web前端入门第 42 问：聊聊 CSS 元素上下左右（水平+垂直）同时居中有几种方法
43.Web前端入门第 43 问：CSS 动画之过渡属性 transition 改变用户体验
44.Web前端入门第 44 问：CSS 循环动画 animation 效果演示
45.Web前端入门第 45 问：CSS 变量 var() 轻松实现主题换肤功能
46.Web前端入门第 46 问：CSS 中的数学函数不要只会 calc
47.Web前端入门第 47 问：CSS @media 媒体查询不要只会视口宽度适配
埋头苦写多年的 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 属性，不失为一个发现新大陆的方法。
原创作者: linx 转载于: https://www.cnblogs.com/linx/p/18809796
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
