2021-05-27 Day17-雪碧图、浏览器内核

雪碧图、精灵图、css sprites

- 将多个图片整理在一张图片上，通过背景定位的方式引入不同图片
- 背景图一般是小图标或者装饰作用的图片
- img一般是页面的内容

- 图片整合的优势：
1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度
2）通过整合图片来减小图片的体积

- 图片整合的原则
1.根据实际需求，小图标尽量上下排列(防止后面不必要的背景图)
2.小图标之间尽量留出足够的空间
3.整合大图片的背景一定是透明的
4.列表符号的图标尽量放在图片最右侧
5.一般情况下，小图标才会做整合

***浏览器内核

Trident:IE
Gecko：代表作品Mozilla Firefox是开源的,它的最大优势是跨平台
Webkit :代表作品Safari、Chrome ， 是一个开源项目。
Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎
	它也是世界上公认的渲染速度最快的引擎。
Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

css hack指一种兼容CSS在不同浏览器中正确显示的技巧方法：

1.img下方3-6px间距问题
	img{vertical-align:非baseline;}
	img{display:block;}
	父元素{font-size:0;}
2.浮动双倍外边距问题(IE6)
	子元素display:inline;
3.表单元素高度及对齐方式不一致
	浮起来
4.a标签包裹图片,IE中会出现边框
	img{border: none;}
5.透明写法
	opacity:0~1;IE8以上的浏览器
	filter:alpha(opacity=1~100); IE9及IE9以下的浏览器
6.cursor鼠标移入效果
	pointer小手/hand(IE)/text文本

特殊符号进行的IE浏览器兼容问题

IE6识别_-
ie6,7识别*+#
ie8-ie11识别在属性后\0
ie9-10识别在属性后\9\0