【CSS 学习总结】目录 - CSS 知识点梳理

一，前言

伴随着整个 11 月份的忙碌，终于，还是匆匆地完结了 Promise 源码部分

（备注：后续会找完整的时间来更新一些常见面试题的分析）

从今天开始，进入 CSS 总结部分；

本篇将针对 CSS 相关知识点进行一次简单的梳理，并列出一个学习目录；

效果类似这篇:【Promise 源码学习】目录 - Promise 知识点梳理

二，CSS 知识点梳理（专栏目录）

| 主题 | 知识点 |

| --- | --- |

| HTML 部分 | HTML 的语义化 <br> HTML 扩展简介 |

| CSS 选择器部分 | 常用选择器分类和使用说明 <br> CSS 选择器的权重和优先级 <br> CSS 选择器-伪类和伪元素 <br> CSS 变量 var |

| 布局部分 | CSS 布局概述 <br> CSS 布局-居中布局-水平居中布局 <br> CSS 布局-居中布局-垂直居中布局 <br> CSS 布局-居中布局-水平垂直居中布局 <br> 两列布局 <br> 三列布局 <br> 圣杯布局 <br> 双飞翼布局 <br> 等分布局 <br> 等高布局 <br> 全屏布局 <br> CSS3 实现多列布局 <br> BFC 的原理和应用 <br> IFC 的原理和功能 |

| 定位和层叠上下文部分 | 定位的实现原理 <br> Position Fixed、sticky <br> 层叠上下文的形成 <br> 相同/不同层叠上下文的层叠顺序 <br> 层叠上下文和 z-Index 的关系 |

| 响应式布局部分 | 像素、独立像素、CSS 像素、像素密度 ppi、设备比率 Devicepixelratio <br> Viewport 缩放的适配 <br> 媒体查询 @Media <br> CSS 的长度单位 px、Em、%、Vw、Rem 等 <br> flex 弹性盒布局|

| CSS 预处理部分 | Less & Sass |

| Icon 部分 | 多种 Iconfont 及使用方式 <br> 纯 CSS 实现 Icon |

| 动画部分 | Transform 变形 <br> Transition 过渡 <br> Animation 动画 <br> 帧动画 |

| 其他 | 移动端响应式布局技巧 <br> 页面的布局方式等 |

三，结尾

如果对 CSS 做一个评价，那就是：入门简单，精通很难；

CSS 布局，包含 HTML 骨架和 CSS 样式两部分，也是整个 CSS 的核心；

页面布局需要关注页面样式的兼容性、代码的可维护行、后续的扩展性以及渲染性能；

有时，单从一个页面的布局，就能够看出一个开发者的布局思路和手法；

所以， CSS 布局的相关知识点也是在面试中的核心考察点、必考项；

本篇，暂时先列出一个大致的操作方向，随更新再进行完善；