浏览器渲染过程

大致过程如下：

1、根据HTML构建HTML树(DOM)Document Object ;

DOM 树的构建是一个是一个深度优化遍历的过程，当前节点的子节点全部构建才会构建下一个节点，DOM的根节点为document 对象。

DOM 树的生成过程会被css和js加载执行阻塞，解析过程的结束会触发DOMContentLoaded 事件。

2、根据CSS构建CSS树(CSSOM);

3、将两棵树合并一颗渲染树;

4、Layout 布局(文档流、盒模型、计算大小和位置)。

5、paint 绘制（把边框颜色，文字颜色，阴影等画出来）。

6、compose合同（根据层叠关系展示画面）。

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

transition - CSS（层叠样式表） | MDN
animation - CSS（层叠样式表） | MDN

ransition过渡（不是所有属性都能进行Transition）

作用：补充中间帧

语法:transition: 属性名 | 时长 | 过渡方式 | 延迟

注意：指定第一个数字默认指定为时长，第二个数字默认才是延迟时间拓展：1s = 1000ms（毫秒）

1、位移：translate

2、缩放：scela

3、旋转:roate

4、倾斜:skew

一般transition配合transform使用

animation

@keyframes 完整语法

一种 from to

@keyframes 名称{
from{
transform:translateX(0%)
}
to{
transform:translateX(100%)
}
}

另一种百分数：

@keyframes 名称
{
    0%{top:0; left:0;}
    '''
    100%{top:100%; left:100%;}
}

animation用法

animaion:时长|过度方式|延迟|方向|填充模式|是否暂停|动画名

时长：1S或1000ms

过渡方式：跟transition 取值一样，如inear

次数：3或者2.4 或者infinite(变大)

方向：reverse|alternate|alernate-reverse

填充方式：none|forwrds|backwards|both

是否暂停：paused |running

绝对定位：position

static 默认行得在文档流里

relative 相对定位不脱离文档流在父元素里

absolute 绝对定位定位于祖先的非static

fixed 固定定位定位基准于 viewport

sticky 粘带定位

注有absolute 一般补一个 relative

写了 absolute或 fixed ,一定补top和left

sticky 的兼容性差

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box [model]"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（[margin]），边框（border），内边距（padding），和实际内容（content）。

盒子模型分类

1 标准盒子模型
content-box 宽度只包含content (内容根才是盒子的边界）
2 怪异盒子模型
border-box 宽度包含到border (边框才是盒子的边界)

文档流 Normal Flow

文档流动的方向; inline 内联元素从左到右到达最右边才会达到,不接受宽度设置，可以由line-height间接确定高度
block 块每个都是一行,默认自动就算宽度，可以用width指定。不要设置width=100%，高度与内部文档流元素决定，但是也可以设置height。
inline-block 从左到右，到达最右边不会分成两段,。宽度结合前两者特点可以设置width，高度与block类似，可以设置height。

《CSS 知识总结》