一、CSS基础

1、选择器

选择器{

属性：值；

属性：值

}

作用：用于匹配HTML元素、分类和权重、解析方式和性能、值得关注的选择器

分类：

• 元素选择器a{}
• 伪元素选择器::before{}
• 类选择器 .link{}
• 属性选择器[type=radio]{}
• 伪类选择器 :hover{}
• ID选择器#id{}
• 组合选择器 [type=checkbox]+labei{}
• 否定选择器 :not(.link){}
• 通用选择器*{}

权重：

• ID选择器 #id{} +100
• 类 属性 伪类 +10
• 元素 伪元素 +1
• 其它选择器 +0

2、非布局样式

字体

• 字体族
• 多字体fallback
• 网络字体、自定义字体
• 网站：iconfont.cn

行高

• 行高的构成
• 行高相关的现象和方案
• 行高的调整

背景

边框

滚动

文本折行

装饰性属性

3、hack 和案例

二、CSS布局

1 、布局简介

2、 布局方式（表格）

3、 一些布局属性

4、 flexbox布局

5、 float布局

6 、inline-block布局

7 、响应式布局

8 、主流网站使用的布局方式

三、CSS效果

1 、box-shadow

2 、text-shadow_x264

3、 border-radius

4、 background

5、 clip-path

6、 3D-transform

四、CSS动画

1 、动画介绍

2 、transition动画（1）

4、 keyframes动画

5、 逐帧动画