CSS(Cascading Style Sheets)层叠样式表

层叠是什么意思？

个人理解，比如：Ps的图层，从上到下的一层一层的叠在一张画布上

CSS中的层叠指的是那些呢？

• 样式层叠——可以对此对一选择器进行样式声明
• 选择器层叠——可以用不同的选择器对同一个元素进行于样式声明
• 文件层叠——可以用多个文件进行层叠

浏览器的渲染过程

浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。比如在 Firefox 中叫做 Gecko，在 Chrome 和 Safari 中都是基于WebKit 开发的。
一个页面通常由三个部分组成，HTML+CSS+JS，那么它们具体是如何被浏览器渲染引擎以后显示到网页上?

1. 根据HTML构建HTML树（Document Object Model ）
2. 根据CSS构建CSSOM树（CSSOM）
3. 将两课树合并生成渲染树（Render Tree）
4. Layout布局（文档流、盒模型、计算大小和位置）
5. Paint绘制（把边框颜色、文字颜色、阴影等显示出来）
6. Compose合成 （根据层叠关系展示画面）

CSS 动画的两种做法（transition 和 animation）

为什么需要用transiton?

因为transition可以过渡动画，避免动画显得过渡突兀和相应的网页交互

看一个对比的小例子🌰

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

transition CSS 属性是 transition-property（过渡属性），transition-duration（过度时间），transition-timing-function（过渡效果） 和 transition-delay（等待过渡开始时间） 的一个简写属性。

看一个完整的小例子🌰 transition: margin-right 2s ease-in-out .5s; 等同于

transition-property:margin-right;      //过渡的属性是margin-right
transition-duration:2s;                //过渡的的时常是2s
transition-timing-function:ease-in-out //过渡是慢速开头和结尾
transition-delay: .5                   //等到0.5秒开始过渡

这么写好麻烦？还不如简写？还不一定记得对单词？ 😵

过渡属性多个怎么办？
答：使用,隔开。比如：transition: margin-right 4s, color 1s;

简写只写一个时间浏览器会不会认错？
答：不会，只写一个会是transition-duration

为什么需要用animation?

因为animation也可以过渡动画，避免动画显得过渡突兀和不需要交互就应该发生的动画。比如：加载动画

animation的写法

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

anmimation需要和@keyframes一起搭配使用，anmimation定义动画的大致，@keyframes，定义动画的具体细节。

看一个小例子🌰

animation: 4s linear 0s infinite alternate move_eye;
@keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }