精灵图
为什么需要精灵图
一个页面中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
核心原理： 将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
精灵图的使用
使用精灵图核心：
-
精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图中
-
这个大图也被成为sprites精灵图或者雪碧图
-
移动背景图片位置，此时可以使用background-position
-
移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
-
因为一般情况都是往上往左移动，所以数值是负值
-
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
字体图标
字体图标的使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点，但是缺点也很明显。
-
图片文件还是比较大的
-
图片本身放大或缩小会失真
-
一旦图片制作完毕想要更换非常复杂
此时，有一种技术的出现很好的解决了以上的问题，就是字体图标iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标的优点
-
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
-
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
-
兼容性：几乎支持所有浏览器
注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化。
字体图标的下载
CSS三角的做法
注意： 边框数值越大，三角就越大。宽度高度必须为0。红框里面的代码是为了照顾浏览器的兼容性。
CSS用户界面样式
1.鼠标样式cursor
取消表单轮廓线
轮廓线outline
给表单添加outline: 0;或者outline: none;样式后，可以去掉默认的蓝色边框。
防止拖拽文本域resize
实际开发中，我们文本域右下角是不可以拖拽的。
textarea {resize: none;}
vertical-align属性应用
CSS的 vertical-align 属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效。
语法：
解决图片底部默认空白缝隙的问题
bug:图片底侧会有一个空白缝隙，原因是行内块元素和文字的基线对齐。
解决办法：
-
给图片添加 vertical-align: middle/top/bottom等。(提倡）
-
把图片转换为块级元素display: block;
单行文字溢出省略号显示
单行文本溢出显示省略号必须满足三个条件
多行文字溢出省略号显示
常见布局技巧
- margin负值的运用
- 文字围绕浮动元素
- 行内块的巧妙运用
- css三角强化
margin负值的运用
- 让每个盒子margin往左侧移动-1px正好压住相邻盒子的边框
- 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位保留位置，如果有定位，则加z-index)。
文字围绕浮动元素
巧妙运用浮动元素不会压住文字的特性
行内块的巧妙运用
css三角巧妙应用
直角三角形是怎么实现的：
