精灵图
CSS精灵技术：能有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。（主要针对小的背景图片，因为其他图片可能经常更换）
通过background-position移动位置，使用需要的图片。（与常规坐标不同，坐标正方向为x往右，y往下，所以精灵图的使用一般为负值）
需要精确的测量，因为需要精确的移动坐标。
.box {/*1.设置一个装图片的盒子，大小为需要显示的图片大小*/width: 60px;height: 60px;margin: 100px auto;/*2.装入图片，将图片向左（负值）移动180px显示需要的图片*/background: url(images/sprites.png) no-repeat -180px 0;}
字体图标
主要用于显示网页中通用、常用的一些小图标，是对于工作中图标部分技术的提升和优化。
看起来是图标，本质是文字，可以变换大小、颜色、边距。
字体图标是一些网页常见的小图标，我们直接网上下载即可。
下载网页：
icomoon字库 Icon Font & SVG Icon Sets ❍ IcoMoon
阿里iconfont字库 iconfont-阿里巴巴矢量图标库
把下载包里面的fonts文件夹放入页面根目录下
/* 字体声明，下载的文件夹中有 */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?p4ssmb');src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?p4ssmb') format('truetype'),url('fonts/icomoon.woff?p4ssmb') format('woff'),url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}
字体声明过后，使用span标签引入字体图标。去安装包中的html复制字体图标的方块使用。
通过修改包裹图标的span的样式来修改字体图标的样式。
span {font-family: 'icomoon';/*必写*/font-size: 20px;color: green;}
图标的追加
在网页中选择import icons在selection.json中添加。
CSS三角
制作一个大小为0，但边框有宽度的盒子，设置其中一边有颜色其余三边透明，则可以生成一个三角形。（为盒子的四边都是三角形，拼起来是正方形）
/*一个底边在上，颜色为红色的三角形*/.box{width: 0;height: 0;border: 10px solid transparent;border-top-color: red;/*为浏览器兼容性*/line-height: 0;font-size: 0;}
三角形的大小取决于边框的粗细。
若需要梯形，可以使用方形盒子加三角。
直角三角形：
1.去掉border-bottom和border-left
2.将border-top设置为原来的两倍
则可以得到两个直角三角形
将其中一个改为透明色就可以得到一个直角三角形。
用户界面样式
鼠标样式
在对象上移动的鼠标指针采用的光标形状。
格式： cursor: pointer;
default箭头，默认pointer小手move 移动text 文本not-allowed 禁止
表单轮廓线
给表单添加outline: 0;或者outline: none;样式之后，就可以去掉默认的蓝色边框。
文本域防拖拽
给文本域添加resize: none;可以禁止文本域的右下角拖拽放大。
vertical-align属性应用
使用场景：常用于设置图片或者表单(行内块元素）和文字垂直对齐。（设置元素的垂直对齐方式，但只针对行内元素或行内块元素有效）
属性：baseline（基线对齐，默认）、top、middle（中线对齐，常用）、bottom
span {vertical-align: middle;}
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。此时就可使用vertical-align消除空隙。（块级元素没有这种空隙，所以也可以通过转换为块级元素来消除）
文本溢出显示省略号
单行文本
步骤：
强制一行内显示文本 white-space: nowrap; (默认为normal，会自动换行）
超出的部分隐藏 overflow: hidden;
文字用省略号替代超出的部分 text-overf1ow : ellipsis;
多行文本
有较大兼容性问题，适合于webKit浏览器或移动端。
overflow : hidden;text-overflow: ellipsis;/*弹性伸缩盒子模型家*/display: -webkit-box;/*限制在一个块元素显示的文本的行数*/-webkit-line-clamp: 2;/*设置或检索伸缩盒对象的子元素的排列方式*/-webkit-box-orient : vertical;
后端人员可以设置显示多少个字，操作更简单。
布局技巧
margin负值
通过设置margin负值可以使盒子反方向运动，消除盒子重叠时多余的border像素。
问题：当消除多余像素后，盒子边框重叠，鼠标经过边框变色效果只能变三条边，如何解决？
解决方法：鼠标经过某个盒子的时候，提高当前盒子的层级（如果没有有定位，则加相对定位，如果盒子都有定位，则加z-index )
文字围绕浮动元素
给图片增加浮动，文字会围绕图片不会被图片盖住。
若想调整文字和图片的间隙，只需调整图片的margin。
CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾刘览器的兼容，我们需要对CSS初始化。
例如设置* {margin:0;padding:0;}、链接标签无下划线、li标签无小圆点等。
字体的书写方式用Unicode编码代替。
