CSS定位 & CSS动画

CSS定位 & CSS 动画

CSS定位

CSS 的两个最重要的基本属性，分别为 display 和 position。

display对应的是网页的在屏幕平面上的布局，如 flex , grid等；而 position ，用于指定一个元素在文档中的定位方式。

取值

1. static static是属性position的默认值，使用该关键字，元素使用正常的布局方式，在normal flow中的布局位置。

2. relative relative表示相对于默认位置进行偏移，定位基点是元素的默认位置，它要搭配top, bottom, left, right 属性一起使用，用来指定偏移的方向和距离。

它可以用作位移，但是更多的在具有absolute属性元素的父元素里，给absolute当爹。

3. absolute

absolute表示相对于上级元素进行偏移，它要搭配top, bottom, left, right 属性一起使用，用来指定偏移的方向和距离。

它有一个十分重要的限制条件，其定位的基点是祖先里最近的非static元素，如果没有，其定位基点则是整个网页的根元素 html。

4. fixed fixed表示相对于视口（viewport）进行偏移，定位基点是浏览器窗口。

它如果搭配top, bottom, left, right一起使用，则表示元素的初始位置是基于viewport计算的，否则元素的初始位置是按照normal flow的默认位置。

5. sticky sticky 类似于 relative 和 fixed的结合， 有时候按自身默认位置定位，当默认位置在当前视窗外时，按照视口的基点定位。

浏览器渲染原理

步骤：

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. layout 布局：文档流，盒模型，计算大小和位置
5. paint 绘制：边框颜色、文字颜色、阴影
6. compose 合成：根据层叠关系展示画面

在需要更新样式的时候，一般采用JS。不同的JS更新样式的方式对应三种不同的渲染方式：

图源Google团队的文章

想要知道更新某一属性触发何种渲染方式，使用此链接

CSS 动画的两种做法

1. transition transition 过渡，可以为一个元素在不同状态实践切换的时候实现过渡效果，补充中间帧。

   用法：transition: 属性名 时长 过渡方式 延迟

   例子点这里

   参考在这里

2. animation animation 属性用来指定一组或多组动画。

   用法：animation: 时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名

   其中，duration和name是必需关键字。

   例子点这里

   参考在这里