CSS日常杂记

1.display none; visibility visible; opacity 0;

 

display:none的元素不在文档流中，不会引起页面的重排和重绘
reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流。
repaint:当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。
元素属性设置为display:none会引起回流和重绘，visibility:hidden会引起重绘。

2.height 0消除浮动问题

http://www.ruanyifeng.com/blog/2009/04/float_clearing.html

3.CSS BEM 书写规范

https://github.com/Tencent/tmt-workflow/wiki/%E2%92%9B-%5B%E8%A7%84%E8%8C%83%5D--CSS-BEM-%E4%B9%A6%E5%86%99%E8%A7%84%E8%8C%83

4.ARGB

8位（#1e000000）ARGB 头两位是透明度，00是完全透明，ff是完全不透明，比较适中的透明度值是 1e，后6位是RGB值,比较适中的透明度值。

5.图片 to base64 /// 循序加载和渐进加载

// 方法一：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
   FileReader.readAsDataURL()
// 方法2：// https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
   HTMLCanvasElement.toDataURL()

JPEG文件交换格式（JPEG File Interchange Format，JFIF）：是一个图像文件格式的标准：https://zh.wikipedia.org/wiki/JPEG%E6%96%87%E4%BB%B6%E4%BA%A4%E6%8D%A2%E6%A0%BC%E5%BC%8F
循序加载：由上而下解码，baseline压缩规范；
渐进加载：解码过程中，从模糊渐渐清晰，progressive压缩规范。

jpeg解码器概述：https://github.com/MROS/jpeg_tutorial/blob/master/doc/%E8%B7%9F%E6%88%91%E5%AF%ABjpeg%E8%A7%A3%E7%A2%BC%E5%99%A8%EF%BC%88%E4%B8%80%EF%BC%89%E6%A6%82%E8%BF%B0.md

6.YcbCr色彩空间

7.切图注意事项

可以jpg就不要png，一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG。
图片记得压缩：https://tinypng.com/
尽量页面与设计稿分毫不差，绝对不糊弄
图片格式与设计那点事儿：https://www.uisdc.com/picture-design-experience
svg压缩:https://www.cnblogs.com/dongxiaolei/p/7344662.html

8.css样式书写顺序（建议）

position relative
display inline-block
width 200px
height 100px
background xxxx
border 10px
font-size 16px
color #ffffff

有助于帮助浏览器渲染

传参就传对象，不要传单个的值

9.怎么实现卡片上的小三角形？

// i标签，并且标签样式生成小三角形
i > i {
    content: "";
    display: block;
    position: absolute;
     0;
    height: 0;
    border-top: 10px transparent solid;
    border-bottom: 10px transparent solid;
    border-right: 10px #fafafa solid;
    left: 2px;
bottom: -10px;

10.skeleton骨架屏

11.CSS3声明局部变量：

&.dark
    --notice-bar-fill #222325
    --notice-bar-color brand-primary
    background-color #222325
    color brand-primary
    display flex
    z-index notice-bar-zindex
    font-size notice-bar-font-size
    min-height 36px
    background-color var(--notice-bar-fill)
    color var(--notice-bar-color)

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

12.stickyfilljs---> position sticky

13.smoothscroll

14.css-vars-ponyfill ：支持IE11 CSS变量

15.