前端学习day007：背景图，精灵图，制作精灵图，阿里矢量图，鼠标样式，行内块元素文字垂直对齐方式

1.背景图
 /* 设置背景图片 url路径
                如果图片小于背景 默认会平铺效果
                如果图片大于背景 显示图片一部分*/
            background-image: url("../imgs/002.jpg");
            /* 设置不平铺 */
            background-repeat: no-repeat;
            /* background-size: 100px 200px; */
            background-size: 50%;
            /* 图片位置 */
            /* 设置一个值代表水平方向的位置
           垂直方向默认居中 */
            /* 两个值代表水平和垂直方向位置 */
            /* 负值代表图片从右到左移动和从上到下移动 正值相反 */
            background-position: ;
            /* 设置图片在中心位置 */
            background-position: center;
            background-position: 50%;

2.精灵图
         利用背景图片的定位实现

        background-image: url(../imgs/002.jpg);

          background-position: -440px 0;
3.制作精灵图
（合成小图片）
         工具： CSSSprite.exe
4.阿里矢量图：

http:// https://www.iconfont.cn/
  
    a.下载直接用
    b.通过在线链接创建的项目引用到本地

http:// https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.24&helptype=code
  
unicode 引用

unicode是字体在网页端最原始的应用方式，特点是：

    兼容性最好，支持ie6+，及所有现代浏览器。
    支持按字体的方式去动态调整图标大小，颜色等等。
    但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

    注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

unicode使用步骤如下：
第一步：拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

修改图片大小 font-size属性

font-class 引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

    兼容性良好，支持ie8+，及所有现代浏览器。
    相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
    因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
    不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：
第一步：拷贝项目下面生成的fontclass代码：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>
图标库：
http://www.fontawesome.com.cn/

5.鼠标样式：cursor: pointer;
            cursor: url(../imgs/1.png), auto;

/* pointer手状 */
            /* cursor: pointer; */
            /* default默认，箭头 */
            /* cursor: default; */
            /* move移动 */
            /* cursor: move; */
            /* wait等待 */
            /* cursor: wait; */
            /* zoom-in放大 */
            /* cursor: zoom-in; */
            /* zoom-out缩小 */
            /* cursor: zoom-out; */
            /* no-drop不让删除，或者不让点击 */
            /* cursor: no-drop; */
            /*
            如果自带的鼠标样式不满足时，可以自定义鼠标样式。
            注意：必须添加auto
             */
            cursor: url("./index.png"), auto;

6.行内块元素文字垂直对齐方式：https://blog.csdn.net/Aislli/article/details/117250213?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165519523816780366515964%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165519523816780366515964&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-2-117250213-null-null.142^v14^control,157^v14^control&utm_term=vertical-align&spm=1018.2226.3001.4187
 

baseline(默认值) :把行内级盒子的基线与父盒的基线对齐,如果没有基线, margin bottom边缘与父盒基线对齐；
sub :把行内级盒子的基线降到父盒下标的适当位置；
super :把行内级盒子的基线升到父盒上标的适当位置；
<percentage> :把行内级盒子提升或者下降段距离 (距离相对于line height计算)，0%意味着同baseline一样；
<length> :把行内级盒子提升或者下降一段距离 , 0cm意味着同baseline-样；
middle :行内级盒子的中心点与父盒基线加上x height-半的线对齐；
text top :把行内级盒子的顶部同父盒的内容区域顶部对齐；
text bottom :把行内级盒子的底部同父盒的内容区域底部对齐；
top :把行内级盒子的顶部跟line box顶部对齐；
bottom :把行内级盒子的底部跟line box底部对齐；
 

span {
            vertical-align: middle;
        }

默认以父元素的基线对齐