CSS高级技巧
一、精灵图
1.1为什么需要精灵图
目的：为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites）
核心原理：将网页中的一些小的背景图像整合到一张大图中，这样服务器只需要请求一次就可以啦
1.2精灵图的使用
使用精灵图的核心：
1.精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图中
2.这个大图片也称为sprites 精灵图 或者 雪碧图
3.移动背景图片位置，此时可以使用background-position
4.移动的距离就是这个目标图片的 x 和 y 坐标，注意网页中的坐标有所不同
5.因为一般情况下都是往上往左移动，所以数值是负值
6.使用精灵图的时候需要精准测量，每个小背景图片的大小和位置
二、字体图标
2.1字体图标的产生 iconfont
主要用于显示网页中通用的、常用的一些小图标。
字体图标可以为前段提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
2.2字体图标的优点
- 轻量级：一个字体图标要比一系列的图像小。减少服务器的请求
- 灵活性：本质是文字，可以随意改变颜色等
- 兼容性：几乎支持所有的浏览器
总结： 1.简单的小图标 ----> 字体图标
2.复杂的图标 ------>精灵图
2.3字体图标的下载
网站：
icomoon字库 Icon Font & SVG Icon Sets ❍ IcoMoon
阿里 iconfont 字库 http://www/iconfont.cn/
2.4字体图标的引入
2.5字体图标的追加
把压缩包里面的 selection.json 重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的文件即可。
三、CSS三角
四、CSS用户界面样式
界面样式就是更改一些用户操作样式，以便提高更好的用户体验
4.1鼠标样式 cursor
li { cursor: pointer}
设置或检索在对象上移动的鼠标指针采用何种系统预定的光标形状
| 属性值 |
描述 |
| default |
小白 默认 |
| pointer |
小手 |
| move |
移动 |
| text |
文本 |
| not-allowed |
禁止 |
4.2轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框
4.2防止拖拽文本域 resize
textarea { resize: none;}
五、vertical-align属性应用
5.1实现行内块和文字垂直居中对齐
CSS的 vertical-align 属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐
vertical-align: baseline | top | middle | bottom;
| 值 |
描述 |
| baseline |
默认，元素放置在父元素的基线上 |
| top |
把元素的顶端与行中最高元素的顶端对齐 |
| middle |
把此元素放置在父元素的中部 |
| bottom |
把元素的顶端与行中最低元素的顶端对齐 |
5.2解决图片底部默认空白缝隙问题
解决方法：1.给图片添加 vertical-align: baseline | top | middle | bottom; 提倡
2.把图片转换为块级元素 display: block;
六、溢出的文字省略号显示
6.1单行文字溢出显示省略号
/* 1. 先强制一行内显示文本 */
white-space: nowrap;
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号代替超出的部分 */
text-overflow: ellipsis;
6.2多行文本溢出显示省略号
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
七、常见布局技巧
7.1margin负值的应用
1.让每个盒子margin往左移动 -1px 正好压住相邻盒子的边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加 z-index）
7.2文字围绕浮动元素
运用浮动
7.3行内块的巧妙运用
7.4CSS三角强化
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
八、CSS初始化
简单理解：CSS初始化是指重设浏览器的样式（也称为CSS reset）
Unicode编码字体：
把文字字体的名称用相应的Unicode编码来代替，这样就可以有效地避免浏览器解释CSS代码时出现乱码的问题
比如： 黑体\9ED1\4F53
宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1