day25 html5

day25

图片整合、css精灵、精灵图、雪碧图、CSS sprites

优势：
    1：减少请求次数，缓解服务端得压力
    2：减少图片得质量，
    最终得目的：提高项目速度，减少性能消耗

图片整合需要注意：
    1：背景图一定是透明得
    2：根据情况得需求，把小图标的间距要处理好。
    3：尽量上下排列。

主流浏览器：
谷歌、火狐、欧鹏、苹果、Ie

浏览器的世界大战 -> 争夺市场份额

    上世纪90年代：当微软发布IE  和 网景公司 网景领航者



为什么会出现浏览器兼容问题？
    每个浏览器的核心源码是不一样的（浏览器内核）

浏览器内核：（重点记）
    Trident      IE内核（代表作：IE)
    Gecko        代表作火狐浏览器
    webkit       苹果、老版本的谷歌
    blink        谷歌和欧鹏的开发商合作（ 新版本谷歌、欧鹏 ）

    Presto   ( Opera前内核 已经废弃 )

名词：BUG    hack     filter
    bug出现的问题
    hack 解决方案
    filter  过滤器

了解一下IE低版本浏览器经典的BUG:
    1:图片边框问题：
        bug : 当图片有超链接的时候  图片会产生蓝色的边框
        hack : img{border:0;}

    2: 图片间距：
        bug：图片的下方有大约3px距离：
        hack : 
            a： 把图片标签和父元素都放在一行上没有回车键
            b:  img{display:block;}


    3: 双倍浮向：
        bug: 如果一个元素添加float:left; 并且存在margin-left  会把margin双倍解析
        hack : 给浮动的元素添加 display:inline;

    4: 默认大小：
        bug: ie低版本默认情况下 不会让高度小于大约16px
            例如 ： 设置高height:10px    保持在16px;
        hack ： font-size:0;  ||   overflow:hidden;

常见的BUG:
    1: 按钮大小不一致：
        a：在按钮的外层套一个父元素，把边框给父元素
        b: 页面中大部分按钮都是用a模拟。    
            如果不想让a产生超链接<a class="btn" href="javascript:void(0) "></a>
        c：如果按钮是一张图片 直接截图


    2：表单元素对不齐
        hack : 添加浮动

    3: 鼠标指针：
        cursor:pointer;
            auto默认
            crosshair加号
            text文本
            wait等待
            help帮助
            progress过程
            inherit继承
            move移动
            ne-resize向上或向右移动
            pointer手形


    4: 透明度：
        opacity:1;      
        filter:alpha(opacity=100)  针对于IE