CSS重要概念
- 文档流&脱离文档流
- 盒模型
- CSS布局
- CSS定位
- CSS动画
概念理解
文档流
文档元素的流动方向：内联属性横向从左到右，块级元素纵向从上到下。
脱离文档流
可以使用float:left/right 或者 position:absolute/fixed
盒模型
box-sizing设置盒模型
- content-box : width = content-width
- border-box : width = content-width + border-width + padding-width
CSS布局
Float布局
目前使用主要为了兼容IE浏览器，尽量少用。
Felx布局
目前最常使用的布局方式，具体文档建议参考CSS Tricks教程 推荐学习Flex布局小游戏：青蛙游戏
Grid布局
由于兼容性问题不是很常用，但在未来应有好广泛的应用。 教程建议参考CSS Tricks Grid 教程 推荐学习Grid布局小游戏：Grid Graden
CSS定位
重点概念和属性：DIV分层，position，层叠上下文，z-index
div分层
由上到下分为： 内联子元素（文字）> 浮动元素 > 块级子元素 > border > background-color
判断出现层叠上下文
- position:relative/absolute 同时 z-index !== auto
- opacity < 1
- transform !== none
- position : fixed
层叠上下文中的层次分层：
CSS动画
渲染原理，三种更新方式，CSS动画优化，transform，transition，animation
渲染原理
谷歌浏览器如何渲染就找谷歌团队人的文章：
查看CSS各个属性触发哪些渲染过程： CSStriggers
三种更新方式
transform/transition/animation
建议还是看看MDN
