CSS Master, Sitepoint 2015读书笔记（印象比较深的几点：CSS优先级3元组表示法，多列及flex，Transforms）

CSS Master

1. [attr~=val] 空格分隔的属性
2. |= hyphenated,前缀
3. 子串：^= *= $=
4. 伪元素：::before ::after ::selection ...
   1.  ::first-letter问题 Chrome[42,44)下，父元素inline/table时无效？
   2.  ::spelling-error 这是不是规范滥用？
5. *用:target高亮fragment（id属性指向的元素子树）
6.  :not( ... )
7.  :first-child, :last-child, :only-child, :nth-child
   1. 注意这里:nth-child(3n)与:nth-child(3n+5)的区别
8.  :empty
9. * :first-of-type
10.  :enabled/disabled, :required/optional, :checked
11. * :in-range/out-of-range 脑残么？
12. 不用chain class，难以override？（这里的3元组表示CSS规则的优先级比较正规，0,2,0）
13. BEM（块元素修改）？<--> Atomic CSS？
14. 调试：Ctrl + Shift + I（进入Inspector？）
15. font: 16px/1.5 'Helvetica Neue',arial; 这里1.5代表行高
16. Node.js > CSSO插件
17. 代码质量：CSS Lint, analyze-css, UnCSS
18. 自动化：Grunt, Gulp（后起之秀）
19. 选择一个盒子模型：box-sizing: content-box / border-box;
20. 管理layers：position / z-index
21. 创建新stacking context：opacity（当<1）
22. 多列布局
    1. column-width, column-gap（normal=1em）, column-rule（用于指定列的border）
    2. columns: 10em 3; //先后顺序不重要（这对parser是个考验）
    3. column-span: all/none;
23. flexbox
    1. display: flex; （直接子元素变为flex项）
    2. flex-wrap: wrap; （超出容器则移到下一行）
    3. .grid > * { flex: 0 0 25%; }
    4. justify-content: space-between / space-around / center（用于footer中的多列？）;
    5. flex = flex-grow + flex-shrink + flex-basis（如何填充可用空间）
    6. order: 0 / 1
    7. 垂直对齐项：align-items : center;
       1. align-content？
24. 属性动画
    1. transition: 1s; （这里0.5s怎么解析为500ms？）
       1. transition-duration + transition-property(all) + transition-timing-function(ease) + transition-delay
    2. timing函数：steps(5), cubic-bezier(0, 1.08, .98, -0.58)
    3. *transitionend事件？每个属性都会触发一次，event.propertyName
    4. animation: <keyframe-rule-name> 500ms;
       1. animation-direction: normal | reverse | alternate | ...
       2. animation-fill-mode: 结束时停留到那个状态
25. Chrome <43：Vendor Prefixing
26. CSS Transforms
    1. 变换如何影响布局：1 变成containing block（CB）, 2 建立新的stacking context（SC），3 局部坐标系in元素的包围盒
    2. 处理overlapping问题：pointer-events: none;
    3. 变换不影响layout属性，但改变元素的：getClientRects() .getBoundingClientRect()
    4. 变换原点：默认为 50% 50% = center;
    5. scale(-2)
    6. rotateX(45deg) + perspective:200px（Foreshortening）;
       1. VS perspective属性（作用于containing元素）
    7. *perspective-origin
    8. *transform-style: flat | preserve-3d;
    9. backface-visibility
27. 条件的CSS
    1. @media only screen and (min-resolution: 1.5dppx) { ... }
    2. @import：阻塞请求
    3. 不要用device-width？High DPI上问题
    4. matchMedia("(min-width: 45em)")
    5. @supports(display:flex) 老实说CSS特性查询太丑陋了
28. SVG：不adhered to盒子模型，不能被定位（要改变位置就必须在SVG DOM树中移动节点）
    1. 怎么这书里老是提及UC？
29. 预处理：Less SASS
30. Scroll snap？Blend modes & Filters（略）