一、浏览器渲染原理：
浏览器渲染的过程主要包括以下六步：
1.根据HTML构造HTML树（DOM树）
2.根据CSS构造CSS树（CSSOM）
3.将这两棵树合并成一颗渲染树（render tree）
4.Layout布局（文档流、盒模型、计算大小和位置）渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素
5.Paint 绘制（把边框颜色、文字颜色、阴影等画出来）
6.Compose 合成（根据层叠关系展示画面，类似于PS中的合并图层）
用JS更新样式的三种方式：
要想知道每个属性触发什么流程可参考一个网站：csstriggers.com/
绝对居中的办法：
left:50%意思是左边线居中，然后再translateX(-50%)就水平居中了
竖直居中：top50%,再translateY(-50%),注意不要写两个transfrom:
二、CSS 动画的两种做法（以一颗跳动的心为例子）：
transform 的MDN介绍:developer.mozilla.org/zh-CN/docs/…
CSS**transform**属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
第一种：transition(参考介绍：developer.mozilla.org/zh-CN/docs/…)
其作用可以补充动画中的中间帧
语法：
transition:属性名 时长 过渡方式 延迟（可以用逗号分隔两个不同属性，可以用all代表所有属性）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition红心</title>
</head>
<body>
<div id="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
<style>
*{margin:0;padding:0;box-sizing:border-box;
}
#heart{
display: inline-block;
margin: 100px;
position: relative;
transition: all 1s;
}
#heart:hover{
transform: scale(1.2);
}
#heart>.bottom{
background: red;
width: 50px;
height: 50px;
transform: rotate(45deg);
}
#heart>.left{
background: red;
width: 50px;
height: 50px;
position: absolute;
transform: rotate(45deg) translateX(31px);
bottom: 50px;
left: -50px;
border-radius: 50% 0 0 50%;
}
#heart>.right{
background: red;
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
transform: rotate(45deg) translateY(31px);
bottom: 50px;
right: -50px;
border-radius: 50% 50% 0 0;
}
</style>
</html>
第二种：animation（参考介绍：developer.mozilla.org/zh-CN/docs/…
其作用同样可以补充动画中的中间帧
缩写语法：
animation:时长 过度方式 延迟 次数 方向 填充模式 是否停止 动画名；
时长：1s 或者 1000ms
过度方式：跟transition一样
次数：4或2.4或infinite等
方向：reverse alternate alternate-reverse
填充模式：none forward backwards both
是否暂停：paused running
动画一般搭配@keyframes使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>animation红心</title>
</head>
<body>
<div id="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
<style>
*{margin:0;padding:0;box-sizing:border-box;
}
#heart{
display: inline-block;
margin: 100px;
position: relative;
animation: heart 600ms infinite alternate ease;
}
@keyframes heart {
0%{transform: scale(1.2);
}
100%{
transform:scale(1.6);
}
}
#heart>.bottom{
background: red;
width: 50px;
height: 50px;
transform: rotate(45deg);
}
#heart>.left{
background: red;
width: 50px;
height: 50px;
position: absolute;
transform: rotate(45deg) translateX(31px);
bottom: 50px;
left: -50px;
border-radius: 50% 0 0 50%;
}
#heart>.right{
background: red;
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
transform: rotate(45deg) translateY(31px);
bottom: 50px;
right: -50px;
border-radius: 50% 50% 0 0;
}
</style>
</html>
