今天，我大致来总结一下我近期学习到的CSS的知识点，对这些内容进行一个回顾与整理。
我们大致从一下几方面进行整理和回顾：
1. CSS简介
2. CSS的选择器
3. CSS样式
4. 文档流与盒模型
5. CSS布局
6. CSS定位
7. CSS动画

CSS简介

CSS的历史

CSS的全称为：Cascading Style Sheets，层叠样式表。它是由李爵士的挪威同事赖先生在1994年提出的。

CSS的版本

目前使用最广泛的版本为CSS2.1，它是在2004年~2011年之间不断完善形成的。其他版本还包括1996年发布的CSS1，1998年发布的CSS2以及1999年就开始的CSS3.目前的CSS已经是分模块进行升级，所以并没有CSS4这种说法。

CSS特点

• 样式层叠
  
• 选择器层叠
  
• 文件层叠
  

CSS选择器

分类

1. 元素选择器；
   
2. ID选择器，用“#”开头，加上ID名；
   
3. 类选择器，用“.”开头，加上类名；
   
4. 通用选择器，用“*”开头，选中的是页面上所有元素；
   
5. 属性选择器，用“[ ]”开头，将属性包起来；
   
6. [attr]{ }，选择包含attr属性的所有元素，不论attr的值是多少；
   
7. [attr = val]{ }，仅仅选择attr属性值为val的所有元素；
   
8. [attr ~= val]{ }，仅仅选择attr属性的值中包含val值的所有元素；
   
9. [attr *= val]{ }，选择attr属性中包含字符串val的元素；
   
10. [attr ^= val]{ }，选择attr属性的值以val开头（包含val）的元素；
    
11. [attr $= val]{ }，选择attr属性的值以val结尾（包含val）的元素；
    
12. [attr |= val]{ }，选择attr属性的值以val或者val-开头的元素；
    
13. 组合选择器
    
14. A,B:表示同时选中A和B；
    
15. A B:表示选中A的后代B；
    
16. A>B:表示选中A的直接子元素B；
    
17. A+B:表示选中A的下一个相邻元素；
    
18. A~B:表示选中A后的N个相邻元素；
    
19. AB：表示选中同时满足A和B的元素。
    

伪类

1. first-child 、last-child 、nth-child(n)
   
2. 表示作为自己父级元素的第几个孩子。
   
3. first-of-type 、last-of-type 、nth-of-type(n)
   
4. 表示作为自己父级当前标签类型的第几个孩子。
   
5. :link
   
6. 选中未访问的链接。
   
7. :hover
   
8. 选中鼠标放置上的链接。
   
9. :active
   
10. 选中鼠标按下未松开时的链接。
    
11. :visited
    
12. 选中访问过的链接。
    

使用顺序：:link----:visited-----:active-----:hover

1. :checked
   
2. 选中被勾选的表单元素；
   
3. :disabled
   
4. 选中被禁用的表单元素；
   
5. :focus
   
6. 选中被激活的表单元素
   
7. :root
   
8. 选中根节点
   
9. :target
   
10. 选中页面中id为当前hash的元素
    
11. :not(xx)
    
12. 选中不为xx的元素
    

伪元素

1. ::before 、 ::after
   
2. 在元素内插入一段内容，作为元素的第一个和最后一个孩子；
   
3. 必须有content属性
   
4. 常用来代替图标、无实际意义的标签
   
5. ::first-line
   
6. 选中段落第一行
   
7. ::first-letter
   
8. 选中段落第一个字符
   
9. ::selection
   
10. 匹配被鼠标选中的文字内容
    

CSS样式

样式来源

1. 浏览器的默认样式；
   
2. 通过继承得到的样式；
   
3. 使用不同的选择器设置的样式。
   

样式的优先级顺序

样式的优先级判断的大规则为： !important > 内联属性样式 > 设置的样式 > 浏览器默认样式 > 继承的样式

优先级计算方法

关于选择器的优先级，有一个计算方法：
* 声明在style的属性（即内联属性），则千位得1；
* 选择器中含有ID选择器的，则百位得1；
* 选择器中包含类选择器、伪类或者属性选择器的，则十位得1；
* 选择器中包含元素、伪元素选择器的，则个位的1.
注意：其中通用选择器、组合符以及否定伪类都不会影响优先级的计算。

继承属性与控制继承

和文本相关的属性一般都会继承，一般的继承属性包含：color、font-size、font-family、line-height。
控制继承的属性大致有以下几种：
1. inherit
* 表示使用继承父级的样式，可以用来将本来不能继承的属性进行继承；
2. initial
* 表示使用该属性的初始值，但需要注意的是，该属性的初始值并不是浏览器的默认值；
3. unset
* 表示如果是继承属性就继承父级，如果不是继承属性，就使用该属性的初始值。

文档流与盒模型

文档流

文档流（Normal Flow），表示文档中元素流动的方向。包括：
1. display:block;
2. display:inline
3. display:inline-block

在新的HTML5的标准中，每一个元素既可以是内联元素，也可以是块级元素，只要看给他的display是什么

盒模型

有两种盒模型，分别为：
* content-box 内容盒 width = 内容宽度
* border-box 边框盒 width = 内容宽度 + padding + border
两种盒子如下图所示：
盒模型

CSS布局

float布局

• 子元素加上float:left或者float:right
  
• 在其父元素上必须加上clearfix
.clearfix { content:' '; display:block; clear:both; }
  

flex布局

这种布局方式一般擅长一维布局

flex container的样式

1. 让一个元素变为flex容器
   
2. display : flex; 或者 display : inline-flex;
   
3. 改变主轴流动方向
   
4. flex-direction:row：从左向右
   
5. flex-direction:row：从右向左
   
6. flex-direction:column：从上到下
   
7. flex-direction:column：从下到上
   
8. 换行
   
9. flex-wrap:nowrap：不换行
   
10. flex-wrap:wrap：换行
    
11. flex-wrap:wrap-reverse：从底部开始向上换行
    
12. 主轴对齐方式
    
13. justify-content:flex-start
    
14. justify-content:flex-end
    
15. justify-content:center
    
16. justify-content:space-between
    
17. justify-content:space-around
    
18. justify-content:space-evenly
    
19. 次轴对齐方式
    
20. align-content:flex-start
    
21. align-content:flex-end
    
22. align-content:center
    
23. align-content:stretch
    

flex item的属性

1. 在item中添加order，可以进行排序
   
2. 在item中添加flex-grow，可以控制item如何变胖
   
3. 在item中添加flex-shrink，可以控制item如何变瘦
   

grid布局

二维布局使用grid布局，这种布局尤其适合不规则布局

CSS定位

新的属性：position

static

是默认值，表示就呆在文档流里

relative

表示相对定位，但是还是没有脱离文档流。
* 一般用于位移
* 主要用于给absolute元素做父级
* 配合z-index使用（注意：默认每一个元素的z-index为auto，他计算出来的值为0，但是要记住auto与0不一样）

absolute

表示绝对定位，要配合relative一起使用，定位基准是祖先元素中第一个position不是static的元素。
* 脱离原来的位置另起一层，比如对话框中的关闭按钮
* 实现鼠标提示

fixed

表示固定定位，定位基准是viewport（可能会出现bug）

层叠上下文

• 每一个层叠上下文都是一个相互独立的空间
  
• 每个空间中的z-index才可以进行比较，与外界的z-index无关。
  

通过一些不正交的属性 ，可以创建层叠上下文
* 根元素
* z-index值不为auto的绝对定位或相对定位元素
* opacity属性值小于1的元素
* transform的属性值不为none
* fixed与sticky定位
* z-index的值不为auto的flex子项

CSS动画

浏览器渲染过程

• 根据HTML构建HTML树（DOM）
  
• 根据CSS构建CSS树（CSSOM）
  
• 将两棵树合并成一颗渲染树（render tree）
  
• Layout布局（文档流、盒模型、计算大小和位置）
  
• Paint绘制（把边框颜色、文字颜色、阴影等画出来）
  
• Composite合成（根据层叠关系展示画面）
  

CSS动画优化

声明：这一部分内容摘抄引用自：CSS动画优化

JS优化

• 对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用 requestAnimationFrame。
  
• 将长时间运行的 JavaScript 从主线程移到 Web Worker。
  
• 使用微任务来执行对多个帧的 DOM 更改。
  
• 使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。
  

缩小样式计算的范围并降低其复杂性

• 降低选择器的复杂性；使用以类为中心的方法，例如 BEM。
  
• 减少必须计算其样式的元素数量。
  

避免大型、复杂的布局和布局抖动

• 布局的作用范围一般为整个文档。
  
• DOM 元素的数量将影响性能；应尽可能避免触发布局。
  
• 评估布局模型的性能；新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模型更快。
  
• 避免强制同步布局和布局抖动；先读取样式值，然后进行样式更改。
  

简化绘制的复杂度、减小绘制区域

• 除 transform 或 opacity 属性之外，更改任何属性始终都会触发绘制。
  
• 绘制通常是像素管道中开销最大的部分；应尽可能避免绘制。
  
• 通过层的提升和动画的编排来减少绘制区域。
  
• 使用 Chrome DevTools 绘制分析器来评估绘制的复杂性和开销；应尽可能降低复杂性并减少开销。
  

坚持仅合成器的属性和管理层计数

• 坚持使用 transform 和 opacity 属性更改来实现动画。
  
• 使用will-change 或 translateZ 提升移动的元素。
  避免过度使用提升规则；各层都需要内存和管理开销。
  

使输入处理程序去除抖动

• 避免长时间运行输入处理程序；它们可能阻止滚动。
  
• 不要在输入处理程序中进行样式更改。
  
• 使处理程序去除抖动；存储事件值并在下一个 requestAnimationFrame 回调中处理样式更改。
  

CSS两种动画的做法

transform属性

包括四个常用的功能
* 位移 translate
* 缩放 scale
* 旋转 rotate
* 倾斜 skew

transition属性

作用：补充中间帧
语法：transition：属性名 时长 过渡方式 延迟
实例：通过transition实现一个跳动的红心
用transition属性实现的一个跳动的心

animation属性

语法：animation：时长 过渡方式 延迟 次数 方向 填充方式 是否暂停 动画名（每一个属性都有单独的名字）
实例：通过animation实现一个跳动的红心
用animation属性实现的一个跳动的心

结束语

这就是近期学习CSS的一些知识，希望自己能更加进步吧，大家一起加油！

版权声明

本内容版权归属本人及杭州饥人谷教育科技有限公司（简称：饥人谷）所有。
任何媒体、网站或个人未经授权不得转载、链接和转贴，或以其他方式复制、发布和发表。
对于违反者，将依法追究责任。