系统学习CSS-精灵图、字体图标

精灵图

原理：
将网页中的一些小背景图像整合到一张大图中 ，这样浏览器只需要一次请求。
作用：
有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
精灵图（sprites）的使用：
精灵技术主要针对于背景图片使用，把多个小背景图片整合到一张大图片中，这个大图片也称为 sprites 精灵图 或者 雪碧图，借助于背景位置来实现—background-position，移动的距离就是这个目标图片的 x 和 y 坐标。
注意
1.在精灵图里面 X Y 坐标值 一定是负的。0除外。因为一般情况下都是往上往左移动，所以数值是负值
2.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置，可以给一个 大概的位置，然后通过 控制台去调试。
缺点：
1.图片文件比较大
2.图片本身放大和缩小会失真
3.一旦图片制作完毕想要更换非常复杂

字体图标

作用：
主要用于显示网页中通用、常用的一些小图标。展示的是图标，本质属于字体
优点：
1.轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
2.灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
3.兼容性：几乎支持所有的浏览器，请放心使用

字体图标与精灵图的区别应用：
1.如果遇到一些结构和样式比较简单的小图标，就用字体图标
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图
使用步骤
1.从网络是下载需要的字体图标，阿里 iconfont 字库 国外的：http://www.iconfont.cn/都是免费的
2.把下载包里面的 fonts 文件夹放入页面根目录下
3.字体图标的引入：在 CSS 样式中全局声明字体，把这些字体文件通过css引入到我们页面中
注：注意字体文件路径的问题

/* 字体声明 */
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?1lv3na');
    src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?1lv3na') format('truetype'),
        url('fonts/icomoon.woff?1lv3na') format('woff'),
        url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

4.在html 标签内添加小图标，一个方框，方框在demo.html中对应复制
注：方框长得一样，但是内容不一样，就像二维码。

<span>  </span>

5.给标签定义字体

span {
    /* 从字体声明里面把第一行复制过来 */
    font-family: 'icomoon';
    font-size: 100px;
    color: chocolate;
    background-color: rgb(199, 116, 116, .2);
}

常见布局技巧

margin负值运用
应用场景：让每个盒子margin 往左侧移动 -1px， 正好压住相邻盒子边框，使得两个边框叠着，而不是挨着，叠着时边框不会加粗。
解决鼠标经过边框不显示问题：
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）
文字围绕浮动元素
运用浮动元素不会压住文字的特性
行内块巧妙运用
1.把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;
2.利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中
CSS 三角强化

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
border: 0 solid transparent;
border-right: 50px solid skyblue;
border-top-width: 100px;

CSS 初始化
指重设浏览器的样式
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容