雪碧图技术

Posted 2020-08-09

一、boder在某些情况下会触发BFC环境，一般用轮廓（outline）而不用边框
二、雪碧图技术（精灵图）
是一种CSS图像合并技术：（循环）；是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
优点：1）减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
2）提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
3）减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。

不足：1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

三、解决兼容性
1）reset重置技术；normalize技术
2）加前缀
3）<!doctype>解析模式
4）CSS中的Hack技术
5）条件注释
6）倒入包

四、浏览器兼容性
1）opacity(filter)
2)PNG背景
3）圆角（倒包，图片）
4）BFC
5）双倍margin兼容问题
6）在IE下有3PXz差距
7）font-size；

五、条件注释一定要写完整