浏览器渲染原理
- 处理 HTML 标记并构建 DOM 树。
- 处理 CSS 标记并构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- Layout 布局（文档流、盒模型、计算大小和位置）。
- Paint 绘制（把边框颜色、文字颜色、阴影等画出来）。
- Compose 合成（根据层叠关系展示画面）。
CSS 动画的两种做法（transition 和 animation）
transition 过度动画
- 作用 补充中间帧。
- 语法
- transition：属性名 时长 过渡方式 延迟。
- transition：left 200ms linear。
- 还可以用逗号分隔两个不同属性： transition：left 200ms，top 300ms。
- 也可以用all来代表所有属性： transition：all 1s；
- 过渡方式： linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
- 注意： 并不是所有属性都可以过渡 display：none=>block 就不能过渡，
如何知道哪些浏览器支持css的特性及资料查阅
-
使用caniuse.com,来查询某一个浏览器，对css特性的支持情况。
-
Google搜索关键词时后面加上MDN
-
CSS tricks
-
张鑫旭的博客
animation
- 语法
- animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
- 时长：1S或者1000ms
- 过渡方式：同transition取值相同，如：linear
- 次数：1或者2.5或者infinite
- 方向：reverse|alternate|alternate-reverse
- 填充模式：none|forwards|backwards|both
- 是否暂停：paused|running
- 以上所有属性都有对应的单独属性
CSS盒模型
两种盒模型
- content-box内容盒子，内容就是盒子的边界（比较常用）
- content-box 的width=其内容的宽度。
- border-box 边框盒，边框才是盒子的边界
- border-box 的width=其内容的宽度+padding+border。
文档流
- 文档里元素的流动方向
- inline元素是从左到右，到达最右边才会换行。
- block元素从上到下，每个另起一行。
- inline-block也是从左到右。
- 宽度
- inline元素宽度为内部inline元素的和，不能用width指定。
- block元素默认自动计算宽度，可用width指定。
- inline-block元素结合了前两者的特点，可以使用width指定。
- 高度
- inline元素高度由line-height间接确定，跟height无关。
- block元素高度由内部文档流元素决定，可以设置height。
- inline-block元素跟block类似，可以设置height。
CSS布局
- 什么是布局
- 把页面分成一块一块，按左中右，上中下等来排列，就是布局。
- float布局
- 子元素上加上float：left和width
- 父元素上加.clearfix。
- flex布局（常用）
- .container{display：flex }（让一个元素变成flex容器）
- .container{flex-direction:row|row-recerse|column|column-reverse }(改变items流动方向)
- .container{flex-wrap：wrap | nowrap | wrap-reverse }（改变折行）
- .container{just-content：flex-start|flex-end|center/space-between }（主轴对齐方式，默认主轴是横轴）
- 。container{align-items：center|stretch|flex-start}（次轴对齐，默认次轴是纵轴）
- Grid布局
- .container{display：grid | inline-grid }（让一个元素变成grid容器）
