CSS 知识大纲
一、CSS 基础
1.1 CSS 选择器及其优先级
1.2 display 的属性值及其作用
1.3 display 的 block、inline 和 inline-block 的区别
1.4 隐藏元素的方法有哪些
1.5 display:none 与 visibility:hidden 的区别
1.6 对盒模型的理解
1.7 CSS3 中有哪些新特性
1.8 单行、多行文本溢出隐藏
1.9 z-index 属性在什么情况下会失效
1.11 CSS 中可继承与不可继承属性有哪些
1.12 link 和 @import 的区别
1.13 伪元素和伪类的区别和作用
1.14 常见的图片格式及使用场景
1.15 对 CSS Sprites 的理解
1.16 CSS 预处理器 / 后处理器是什么？为什么要使用它们？
1.17 对 line-height 的理解及其赋值方式
1.18 Sass、Less 是什么？为什么要使用他们？
1.19 对媒体查询的理解
1.20 transition 和 animation 的区别
1.21 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到 @3x, @2x 这种图片
1.22 margin 和 padding 的使用场景
1.23 CSS 优化和提高性能的方法有哪些
1.24 display:inline-block 什么时候会显示间隙
1.25 对 CSS 工程化的理解
1.26 如何判断元素是否到达可视区域
1.27 对 requestAnimationframe 的理解
1.28 为什么有时候用 translate 来改变位置而不是定位
1.29 li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？
1.30 替换元素的概念及计算规则
1.31 ::before 和 :after 的双冒号和单冒号有什么区别？
二、页面布局
2.1 两栏布局的实现
2.2 三栏布局的实现
2.3 水平垂直居中的实现
2.4 对 Flex 布局的理解及其使用场景
2.5 常见的 CSS 布局单位
2.6 px、em、rem 的区别及使用场景
2.7 如何根据设计稿进行移动端适配
2.8 响应式设计的概念及基本原理
三、定位与浮动
3.1 为什么需要清除浮动？清除浮动的方式
3.2 对 BFC 的理解，如何创建 BFC
3.3 position 的属性有哪些，区别是什么
3.4 什么是 margin 重叠问题？如何解决？
3.5 display、float、position 的关系
3.6 使用 clear 属性清除浮动的原理
3.7 absolute 与 fixed 共同点与不同点
3.8 元素的层叠顺序
3.9 对 sticky 定位的理解
四、场景应用
4.1 实现一个三角形
4.2 如何解决 1px 问题？
4.3 实现一个扇形
4.4 画一条 0.5px 的线
4.5 设置小于 12px 的字体
4.6 实现一个宽高自适应的正方形