CSS
# 重绘重排
- 重排，dom 的变化影响到了几何属性，浏览器重新计算元素的几何属性，其他元素的几何属性和位置也会发生变化，浏览器需要重新构造渲染树
- 引起重排，规模尺寸，布局，隐藏显示
- 重绘，浏览器将受影响的元素重新绘制到屏幕上的过程称为重绘
- 引起重绘，改变元素外观属性，比如 color，background-color
- 重排必定重绘，重绘不一定重排
- 优化
- 减少重绘重排的操作，合并多次 DOM 和样式的修改操作；
- 使用 fragment 创建虚拟节点
- 将需要多次重排重绘的元素 position 属性改为 absolute 或 fixed，使其脱离文档流
# 盒子模型
- 水平垂直居中方法：
- display: flex
- display: table-cell
- js
- 定位
- 标准盒模型，大小=content+padding+border+margin。box-sizing: content-box
- ie 盒模型，大小=content+margin。box-sizing: border-box
# 布局
- 弹性布局
- 圣杯布局，浮动和负 margin
- 双飞翼布局
- 左右固定，中间自适应
# 弹性布局优缺点
# 响应式布局优缺点
# 伪类和伪元素
- ::before，伪元素
- :before，伪类
# 骨架屏的实现思路
# 过渡和动画效果
- css3 动画
- animation，定义动画帧的效果（@keyframes，设置帧）
- transition，定义元素变化过程中的行为
- transform，定义元素变化结果
- 优点：浏览器对 css3 会做优化，性能更好
- 缺点：兼容性不好，动画控制不够灵活
- js 动画
- 优点：动画控制好，兼容性好
# 系统分辨率和固定分辨率优缺点
# display:none 与 visibility:hidden
# canvas 动画
- threejs
- 白鹭引擎
- 虚幻 4
# WebGL\SVG\Canvas
# canvas
- Canvas 通过 JavaScript 来绘制 2D 图形，Canvas 只是一个 HTML 元素，其中的图形不会单独创建 DOM 元素。因此我们不能通过 JavaScript 操控 Canvas 内单独的图形，不能对其中的具体图形进行监控
- 在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
- 标量图，放大缩小会失真
# svg
- svg 创建的每一个元素都是一个独立的 DOM 元素，既然是独立的 DOM 元素，那么我们就可以通过 css 和 JavaScript 来操控 dom。可以对每一个 DOM 元素进行监听。
- 并且因为每一个元素都是一个 DOM 元素，所以修改 svg 中的 DOM 元素，系统会自动进行 DOM 重绘
- 矢量图，放大缩小不会失真
# margin 塌陷
- 同级元素设置 margin 上下边距会出现合并
- 父子元素，子元素设置上边距，会传递到父元素
- 解决：
- 父盒子设置透明 border
- 父盒子添加 overflow：hidden
- 父盒子设定 padding 值
- 伪元素给子元素的前面添加一个空元素
# 行内元素 float 后的效果
- 行内元素 float 后变得像是 inline-block，同时拥有行内和块级的特性，最明显的不同是默认 width 不是 100%，可以设置 padding、width、height
# sass/less/stylus
- 具有变量，缓和，嵌套，继承，颜色混合等基本特性
- less 需要{}，sass/stylus 可以缩进表示嵌套关系
- scss 无全局变量的概念，less/stylus 有作用域的概念
- sass 基于 ruby，less/styleus 基于 nodejs
# css 实现硬件加速
- 硬件加速是指通过创建独立的复合图层，让 GPU 来渲染这个图层，从而提高性能
- 一般触发硬件加速的 css 属性有：transform、opacity、filter，为了避免 2d 动画在开始和结束的时候重绘操作，一般使用 transform: translateZ(0)