理解CSS CSS解决网页布局与内容，CSS3，规范模块化发展
布局和定位 层叠（用于解决规则冲突），优先级 样式表为规则声明的集合，产生冲突
三大规则：1）样式表来源；2）选择器优先级（is(),not(),has()本身不计入优先级；where()优先级为0）；3）源码位置；
继承 大部分具有该特性的属性跟文本相关； 可以使用inherit关键字显式指定一个属性值从其父元素继承
CSS值和单位 .card（选择器） { 属性+值（分为文字类，数值类，函数生成；包含单位） }
盒模型 Margin Border Padding Content(控制内容，模型，定位) 实现 三角形：border 固定比例矩形：padding 水平居中：auto 只有margin可以设置为负值，外界可感知的宽高
常规流布局 内联 外联 块级格式化上下文BFC 外边距塌陷 Line box 包含的最高的顶到最低的底 实例 文字和icon对齐 line box的计算高度位置原理与vertical-align设置，垂直对齐；若设置父元素 size 0，则居中对齐。
弹性盒子flex： 作用于父元素或者子元素 宽高未知，也能排列位置和显示顺序；
使用Grid布局示例
两种布局对比
- 一个是一维，一个是二维；
- 基于内容，布局；
- 兼容性更好flex；
大面积总体用grid更好。
定位position Relative; absolute; fixed;sticky
层叠上下文(the stacking context) 对HTML元素的三维构想，元素沿着Z排开 包括不同层之间和同一层之间
z-index
tranform变形3D
transition过渡
animation动画
Case: 尽量不用触发reflow属性； 尽量使用transform和opacity动画 遇到性能问题触发硬件加速，如设置will-change,transform3d等等 媒体查询的使用 部分特定条件下才生效 将媒体类型，媒体特性做为约束条件。 Tips:尽量少断点，根据内容选择
设备像素 DPI，PPI CSS像素 移动端viewport CSS生态相关 语言增强 CSS预处理器 Scss, less, stylus简单对比 广义CSS预处理器 Postcss机制浅析 Css tokenizer tokens parser AST Processor(Plugins) modified AST Stringifier css代码
Style-component浅析 Step1: 生成classname做为componentId Step2: 同样的生成作为唯一类名(hash值)，用stylis,生成唯一关联的CSS字符串 Step3:唯一类名对应的css样式insert到style中 Step4:两个类名写到目标节点的class中
