CSS日常杂记

2022-07-09 12:12:47

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色彩空间