css易掉坑知识点整理之系列（二）

之前也整理过系列（一），有兴趣的请点击：​​系列一​​。这是我在学习的过程中遇到的易错的或者易掉坑的css知识点的总结整理，嗯，还是会持续更新的

2018/6/19

今天遇到了一个base64格式的图片数据，想要作为背景图片，嗯，这种不是直接写url地址即可，先看个小示例

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==”/>

如果是背景图的话也是类似的

background-image:url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==”)

在上面的URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。

下面是整理的类似的用法

• data:image/gif;base64,base64编码的gif图片数据 
• data:image/png;base64,base64编码的png图片数据 
• data:image/jpeg;base64,base64编码的jpeg图片数据 
• data:image/x-icon;base64,base64编码的icon图片数据

2018/6/20

-- CSS性能优化问题 --

1. 加载方面
   1）慎用 @import：import 会使我们的 link 样式由原本的并发加载，变成异步加载；
   2）压缩代码体积：
      a. 压缩代码，删除换行，多余的空格和注释；
      b. 合并重复代码，提高代码的通用性；
      c. 精简包含选择符，在使用包含选择的时候，尽量精简层级；
      d. 能使用复合样式时，尽量使用复合样式；
      e. 多利用继承，来精简样式；

2. 优化请求
   1）使用 css 精灵，减少图片个数和体积；
   2）合理合并文件，精简外部文件个数；
   3）对于不需要重复使用的图片，可适当使用 data Uri；
   4）在设计统一的情况下，可使用 FontIcon 的方法，来统一整合页面上的图片；

3. 渲染方面
   1）涉及动画方面，尽量可以使用位移来解决，努力减少回流；
   2）涉及动画方面，可以利用 3D，来进行 GPU 加速；
   3）避免使用 table，为了减少回流；
   4）避免 text-shadow 和 box-shadow 层级过多；
   5）减少浮动和绝对定位的滥用；

   6）不滥用 WEB 字体，在部分浏览器下会造成渲染阻塞；

2018/7.4

图片默认样式清楚：

img{border:none;  vertical-align:top;}

translateX(100%); 百分比是相对于元素的宽度

translateY(100%); 百分比是相对于元素的高度

2018/7.12

1、类选择器可以结合元素选择器来使用。
例如，您可能希望只有段落显示为红色文本：

p.active{color:red;}

选择器现在会匹配 class 属性包含 active的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。

2、css多类选择器

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：

.active.fontColor{background:silver;}

这个选择器将只匹配 class 属性中包含词 active和 fontColor的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 active和 fontColor，将不能匹配。不过,class属性中如果包含除上面的两个类外，还有其他的类，也是匹配的哦

更新于：2018/9/23

图片排成一排的时候，默认有间距，解决办法，给图片添加浮动：float:left