浏览器渲染原理
- 根据HTML构建HTML树（DOM树）
- 根据css构建css树
- 将两棵树合并成 一颗渲染树
- layout布局（文档流，盒模型，计算大小和位置）
- paint绘制（把边框颜色，文字颜色，阴影等画出来）
- compose合成（根据层叠关系展示画面）
css动画的两种做法
- transition
- transition的作用就是补充中间帧
- 语法：属性名 时长 过渡方式 延迟
注意
- 但并不是所有的属性都能过度
- display none到block 无法过渡，一般改成visibility hidden到visible
- 背景颜色可以过渡
- opacity可以过渡
总结
过渡必须要有起始，并且可以寻找到过渡规律的一般都可以过渡
- animation
- animation 声明关键帧 添加动画
- 声明关键帧@keyframes xxx
- 两种写法
- from => to
- 百分比的形式
- 添加动画
在需要添加动画的地方写上
···
animation：xxx 时长 过渡方式 延迟 次数 方向 填充模式 是否暂停
···
上面的所有属性都有对应的单独属性
css布局
关于css布局有三种分别是
- float布局
float布局一般适用于需要兼容IE9
- 子元素上加float：left 和width
- 在父元素上清除浮动
- flex布局
flex布局一般适用于不需要兼容最新版浏览器
- 声明flex布局
- 利用justify-content和align-items的属性可以轻松达到想要的效果
- grid布局
grid布局一般适用于只兼容最新版浏览器
- 声明 grid布局
- 常用语法
grid-template-columns代表每一列宽度
grid-template-rows代表每一行宽度
grid-row-start和grid-row-end代表一个元素的起始到结束的范围（横）
grid-column-start和grid-column-end同上（竖）
fr：份 可以不用写数值通过份来分空间
定位
- relative 相对定位
- 不脱离文档流
- 一般用于给absolute当爸爸
- 可以做位移但很少用
- 学会管理z-index的使用
- absolute 绝对定位
- 定位基准：祖先元素中非static元素
- 相对于父元素中最近一个定位元素来定位
- fixed 固定定位
- 定位基准是视口（不一定）
- 手机端尽量不要使用
- 广告及回到顶部按钮
- sticfy 粘滞定位
兼容性很差，主要作用就是当页面滑动到一个写有stickfy的元素时，元素便会粘在页面
注意
- 一般写了absolute都要补relative
- 写了absolute或者fixed一定要补上top 和left
层叠上下文
- 一个div的分层
background border 块级子元素 浮动元素 内联元素 - z-index的值为auto时不能创建层叠上下文
注意
- 每个层叠上下文就是一个新的小世界（作用域）
- 这个小世界里面的z-index跟外界无关
- 处在同一个小世界的z-index才能比较
- 负z-index逃不出小世界
