使用精灵技术的原因：
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
使用精灵图核心：
1.精灵技术主要针对于背景图片的使用，就是把多个小图片整合到一张大图片中。
2.这个图片也称为sprites 精灵图或者雪碧图
3.移动背景图片位置可以用background-position
4.移动的距离就是目标图片的x和y坐标，注意网页中的坐标有所不同
5.一般情况下是往上往左移动，所以数值是负值
6.使用精灵图时候需要精确测量每个小背景图片的大小和位置
字体图标
字体图标的使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图有诸多优点，但其缺点还是比较明显的
1.图片文件较大
2.图片本身放大缩小会失真
3.一旦图片制作完毕想要更换非常复杂
字体图标的优点
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标会马上渲染出来，减少了服务器的请求。
灵活性：本质是文字，可以随意更改颜色，产生阴影、透明效果、旋转等
兼容性：几乎支持所有浏览器
css三角做法：
利用边框即可
.box {
width: 0px;
height: 0px;
border: 10px solid transparent;
border-top-color: pink;
}
css用户界面样式：
1.鼠标样式
cursor： default（小白）、text（文字）、pointer（小手）、not-allowed（禁止）、move（移动）
2.表单的轮廓线
去掉表单的轮廓线
outline：0 或者 outline： none；
3.防止拖动文本域
textarea { resize: none; }
4.vertical-align
使用场景：用于设置图片或者表单（行内块元素）和文字垂直对齐
img { vertical-align: middle }
使用场景：消除图片底部的空白缝隙
img { vertical-align: bottom }
5.溢出文字用省略号显示
单行文本做省略号显示
条件：
1.先强制一行内显示文本
white-space: nowrap;
2.超出部分隐藏
overflow: hidden;
3.文字用省略号代替超出部分
text-overflow: ellipsis;
多行文本做省略号显示
1.弹性盒子模型显示
display: -webkit-box;
2.限制在一个块元素显示的文本行数
-webkit-line-clamp: 2;
3.设置或检索伸缩盒子对象子元素的排列方式
-webkit-box-orient: vertical;
常见的布局技巧
1.margin负值的运用
margin-left： -1px；可以使盒子叠起来，然后解决边框1+1 = 2的问题
2.文字围绕浮动元素
3.行内块元素的巧妙应用
初始化css
*{margin:0;padding:0}em,i{font-style:normal}li{list-style:none}img{border:0;vertical-align:middle}button{cursor:pointer}a{color:#666;text-decoration:none}a:hover{color:#c81623}button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}
