css知识总结

一、浏览器渲染原理

要了解浏览器渲染页面的过程，首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源，然后解析、构建树、渲染布局、绘制，最后呈现给客户能看到的界面这整个过程。
用户看到页面实际上可以分为两个阶段：页面内容加载完成和页面资源加载完成，分别对应于DOMContentLoaded和Load。

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片等
load事件触发时，页面上所有的DOM，样式表，脚本，图片都已加载完成

浏览器渲染的过程主要包括以下五步：

1. 浏览器将获取的HTML文档解析成DOM树。
2. 处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
3. 将DOM和CSSOM合并为渲染树(rendering tree)将会被创建，代表一系列将被渲染的对象。
4. 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
5. 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

需要注意的是，以上五个步骤并不一定一次性顺序完成，比如DOM或CSSOM被修改时，亦或是哪个过程会重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。而在实际情况中，JavaScript和CSS的某些操作往往会多次修改DOM或者CSSOM。

3534846-00ef9f3d405462ef.png

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

Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。

当鼠标放置于缩略图之上，缩略图会迅速变大。注意，缩略图的变大是瞬间实现的。

 img{      height:15px;      width:15px;  }    
 img:hover{      height: 450px;      width: 450px;  }    
 img{      transition: 1s;  }  图片放大的过程需要1秒

我们还可以指定transition适用的属性，比如只适用于height。这样一来，只有height的变化需要1秒实现，其他变化（主要是width）依然瞬间实现

img{      transition: 1s height;  }    

transition的状态变化速度（又称timing function），默认不是匀速的，而是逐渐放慢，这叫做ease。

  img{      transition: 1s ease;  } 

除了ease以外，其他模式还包括
（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速

Animation

1. 用 @keyframes 定义动画名 ，以及该名称包含的动画需要变化的属性及内容

2. animation-name:元素绑定动画名（@keyframes定义的动画名）

3. animation-duration：动画持续时间

4. animation-timing-function：动画变换速率

5. animation-delay：开始时间。触发动画后多久开始动画

6. animation-interation-count: 循环播放次数。（infinite 是无限次）

7. animation-direction: 动画运动方向 （normal/ alternate: 默认值为normal，如果是normal动画每次循环都是向前播放的，也就是每次都是从0%播放到100%。 另一个值是alternate，设定animation-direction为alternate，那么就会从0%播放到100%后就会从100%播放到0%。结合 animation-interation-count:infinite，可以形成动画来回循环播放。例如实现“如何使一个小球来回无限运动”）

7.animation-play-state(running/pause)：动画的播放状态(其中running是默认值，就是在播放。而paused就是暂停播放。而当动画暂停播放后，再重新设置为running的时候，就会从原来的位置重新播放。)

.animation{
    width: 300px;
    height: 300px;
    position: absolute;
    font-size: 22px;
    color: white;
    background-color: brown;
    animation: ccchange 3s ease alternate infinite;
}
 
@keyframes ccchange {
    0%{
        width: 300px;
        height: 300px;
        background-color: brown;
    }
 
    40%{
        width: 500px;
        height: 500px;
        background-color: seagreen;
    }
 
    60%{
        width: 400px;
        height: 400px;
        background-color: coral;
    }
 
    100%{
    }
}