1.精灵图/雪碧图 sprites
概念:由多张图组合成的一张图
实现步骤:
1.实现一个指定带下的盒子
2.讲精灵图设置为该盒子的背景图
3.通过background-position属性,设置背景图的起始位置
优缺点:
减少访问次数,提升性能
占用内存小
文件数量小,命名难度小
缺点:增删图片麻烦,步骤繁琐
2.兼容性问题:
同一个页面在不同的浏览器或版本看到的效果不一致。
css Bug:css在不同浏览器中解析不一致
css Hack: 针对特定的浏览器写特定的代码
处理浏览器兼容性问题: 【添加私有前缀】
代表浏览器 浏览器内核 前缀
欧朋 prest -o-
IE trident -ms-
火狐 grcko -moz-
谷歌 webkit -webkit-
谷歌和欧朋联发 blink
写法: -o-color:red;
3.常见兼容性问题:
1.img的3px问题 {盒子不设置高度,盒子里放一张图片,盒子高度会比图片高3px左右}
给img设置vertical-align:top 丨 bottom 丨 middle;
或者给img设置display:block;
2.行级或者行内块元素水平方向上会有间隔。
给元素设置浮动
或者给元素之间的空格和换行全部去掉
3.表单元素垂直方向上对不齐。
给元素设置浮动
给眼神设置vertical-align:top;
4.图片外面有超链接,在低版本浏览器中会有边框
给图片设置边框为0
5.图片如果是png24格式,在低版本浏览器中会显示成不透明效果
将图片保存为png8格式
(png格式会保留透明)