day07元素的分类、精灵图、矢量图标

一、元素的分类

  1.块标签（块元素 块标记）

  特点：

1.纵向排列，独占一行

2.所有的样式都能设置（width,height,padding,margin....）

3.可以当做父元素 举例：div p h1-h6 ul li ol dl dt dd 语义化标签 form....

  2.行内元素（行内标签，内联元素）

  特点：

1.横向排列，在一行显示

2.width height不起作用

3.所有的文字样式、背景色可以正常显示，padding、border、margin左右可以正常添加

4.一般不作为父元素（a特例） 举例：a b span strong i em s u del sup sub ....

  3.行内块标签

  特点：

1.横向排列，在一行显示

2.所有的样式都能设置（width,height,padding,margin....）

3.基线对齐垂直方向有3像素的间距 举例：img input

    1.图片间距问题

     水平方向：换行导致

    垂直方向：原因：基线对齐

    2.图片间距问题的解决：

      1.给父元素添加font-size:0;

      2.给img 添加 vertical-align vertical-align: top; ---------顶端对齐 vertical-align: middle; ---------居中对齐 vertical-align: bottom; ---------底部对齐 vertical-align: baseline;--------基线对齐（默认）

      3.转化为块元素 display:block; <!-- vertical-align垂直对齐方式，只对行内块元素起作用 -->

  4.元素类型的转换

  display:inline|inline-block|block; display:inline;-----------------转化为行内元素

display:inline-block;-----------转化为行内块元素

display:block;------------------转化为块元素

  5.display其他属性值

   block: 转化为块元素 元素显示 none:元素隐藏

二、精灵图（雪碧图）

多个小图标整合在一张图片上

优点：

1.占内存小

2.减少http请求次数

3.风格统一，更换风格方便

4.网站优化

缺点：

1.一个图片位置发生变换，全部发生变化

2.量取麻烦 重点（难点） 量取的位置(x,y为负数) background-position:x y;

三、阿里巴巴矢量图标库使用

1.复制文件---复制到项目中 iconfont.css iconfont.woff iconfont.woff2

2.引入 iconfont.css文件

3.标签起名称 <div class="iconfont"></div>

4.标签内部存放内容 <div class="iconfont"></div>