一、精灵图

为什么需要精灵图

• 所谓的精灵图就是将多张小图标通过图片整理的方法整合到一张上面，减少程序员的命名，减少了用户对服务器访问压力；

精灵图使用的核心技术

• 核心技术就是利用背景图插入精灵图，然后用背景图的位置移动background-position控制图标显示；

使用精灵图的步骤：

1. 第一步：使用精灵图盒子必须要有固定的宽高，因为精灵图要用背景图插入，背景图不占位；
2. 第二步：将精灵图以背景图的方式插入，不需要平铺；
3. 第三步：用背景图的位置移动查找想要的图标，取值都是负值；

 /* 第一步 */
    width: 135px;
    height: 108px;
    /* 第二步 */
    background: pink url(./img/abcd.jpg) no-repeat;
    /* 第三步*/
    background-position: -117px -561px;

二、SEO三大标签

• 想让我们的网页被搜索引擎搜到的时候排名靠前，除了花钱打广告，代码也需要做相应的优化。
• 三大标签：标题， 描述，关键字

三、文本溢出省略号显示

单行文本溢出省略号显示

• 如果盒子的高度和宽度都是固定的，如果文字的长度超出了盒子的宽度就会折行显示，我们需要进行溢出省略号显示，就采取以下的三个步骤：

.sin-line {
            第一步：让文字强制一行显示 
            white-space: nowrap;
            第二步：溢出隐藏 
            overflow: hidden;
            第三步：溢出的内容省略号显示
            text-overflow: ellipsis;
        }

多行文本规定某一行溢出省略号显示

.mu-row {
                        允许 长单词/长数字 换行 
        		word-break: break-all;
        		开启盒子的弹性布局 
        		display: -webkit-box;
        		控制第几行出现省略号
        		-webkit-line-clamp: 2;
        		设置子元素从上向下垂直排列
        		-webkit-box-orient: vertical;
        		溢出隐藏
        		overflow: hidden;
        		溢出的内容省略号显示
        		text-overflow: ellipsis;
        }

• 可以将以上两种情况直接放在自己的base.css中，如果需要直接调用类名即可；