2020.0417知识总结（补充）

知识总结

一、图片整合
图片整合：精灵图、雪碧图、css精灵、css sprite
优点：减少请求次数，缓解服务端压力；减少图片质量；提高项目速度，减少性能消耗。
注意事项：背景图一定得是透明的；根据情况的需求，把小图标的间距处理好；尽量上下排列。
二、浏览器兼容
主流浏览器：谷歌、火狐、欧鹏、苹果、IE
浏览器的世界大战（争夺市场份额）：上世纪90年代，当微软发布ie和网景公司 王景领航者
为什么会出现浏览器兼容问题？
答：每个浏览器的核心源码（浏览器内核）是不一样的
浏览器内核：trident ie内核（代表作ie）
Gecko 代表作：火狐浏览器
Webkit 苹果、老版本谷歌
Blink 谷歌和欧鹏的开发商合作
Presto Opera前内核，现已废弃
名词bug（出现的问题）hack（解决方案）filter（过滤器）
低版本ie浏览器经典bug：
图片边框问题：
Bug：当图片有超链接的时候，图片会产生蓝色边框
Hack：img{border：0；}
图片间距：
Bug：图片的下方大约有3px间距
Hack：把图片标签和父元素放在同一行上面，不要回车键或者img{display：block；}
双倍浮向：
Bug：如果给一个元素添加float:left;并且存在margin-left，会把margin双倍解析
Hack：给浮动的元素添加display:inline;
默认大小：
Bug：ie低版本默认情况下，不会让高度小于大约16px
Hack：font-size：0；或者overflow：hidden；
常见的bug：
按钮大小不一致：
Hack：给按钮外层添加父元素，把边框给父元素；
页面中大部分按钮都是用a模拟。如果不想让a产生超链接，添加
如果按钮是一张图片，直接截图即可。
表单对不齐：
Hack：添加浮动
鼠标指针：
cursor:pointer;

            auto默认
            crosshair加号
            text文本
            wait等待
            help帮助
            progress过程
            inherit继承
            move移动
            ne-resize向上或向右移动
            pointer手形
透明度：
   Opacity：1；
   Filter：alpha（opacity=100）针对ie

三、HTML和css怎么绘制页面的
渲染流程：回流与重绘（元素样式的变化对整个页面的渲染的影响）
Reflow与repaint