html-day10css兼容问题及常见的bug&hack

精灵图/雪碧图：多张图组合实现的图片。 sprites 
实现步骤：
    1.实现一个指定大小的盒子
    2.将精灵图设置为该盒子的背景图
    3.通过background-position来调整背景图的位置，以显示想要的图案。
优缺点：
    减少请求，提升性能
    减少文件数量，降低命名难度
    占用内存少
    步骤繁琐，增删图标麻烦。

1.图片3px问题
  1.给图片设置vertical-align:top | middle | bottom;
  2.给图片设置display:block;
2.行内块元素水平方向之间会有间隔
    1.给元素加浮动
    2.去掉元素代码之间的空格和换行。
3.图片被a包裹，在低版本浏览器会有边框
    1.给图片去掉边框
        设置border:0px solid #000;
4.png24格式的图片，在低版本浏览器显示为不透明
    1.保存成png8格式
    2.保存成gif格式
    图片格式：
        jpeg/jpg：可以提升或者降低图片压缩级别，会自动填充透明为白色，节省内存。
        png:带透明格式的图。  【带圆弧的图、小图标】
5.表单元素垂直方向不能对齐
    1.给元素添加浮动
    2.给input设置vertical-align
6.margin的粘连问题-父随子动
    1.给父元素设置overflow:hidden;
    2.给父元素设置上边框
    3.使用内边距实现
7.margin的塌陷问题
    1.在一个元素身上设置足够的间隔
    2.给其中一个元素添加一个父亲，给父亲设置overflow:hidden;
8.鼠标手型
    cursor:hand;
    cursor:pointer;