精灵图
为什么要使用精灵图
因为一个网页通常需要很多的图片，但是这样子多次请求服务器导致加载速度慢，可以通过把所有的小图标都制作在一张图片上，进而只需要请求一次，提高了效率。
具体使用
精灵图的使用主要是要通过测量，关键的数据在于图片的xy坐标，以及图片显示的宽和高，其中应该要注意坐标的方向，同时还有我们在设置background-position的时候，是在移动图片不是移动盒子，所以通常是把图片向上向左移动，所以通常会使用负值进行操作。
字体图标
为什么使用
常见小图标，比如导航，家，WiFi等图案的便捷表示
如何获得
可以通过阿里巴巴的网站（推荐 www.iconfont.cn/ 也可以通过，需要魔法 icomoon.io
如何使用
需要在css中连接字符图标库，同时通过字符图标的demo文件中找到对于图标，进行复制粘贴即可使用。如果后续需要添加，阿里巴巴的网站可以直接在购物车中继续添加即可，而icomoon则需要上传原先的文件后进行进一步添加
css三角
通过设置一个宽高都为0的盒子，之后设置border-top/left··· 宽度（不一定要相同，能做出不同形状的三角形） border—top:100px border-left:50px border-right,border-bottom:0px;颜色，就能呈现出一个三角形。之后通过设置定位，移动到合适的地方。
鼠标样式
cursor：可以设置鼠标的样式。
表单轮廓
input { outline: none; }
防止拖拽文本域
textarea{ resize: none; }
vertical-align属性应用
行内块文素与默认元素是基线对齐，可以通过设置vertical-align:middle来让文字和图片垂直居中
解决文字缝隙
默认的行内块元素和文字基线对齐，所以导致文字的底部存在一个空白缝隙 解决方法：
- 给图片添加vertical-align:middle（只要不是baseline）
- 把图片转换成块，display:block
单行文字溢出显示省略号
white-space:nowrap;（文字强制性单行显示 overflow:hidden;（溢出部分隐藏，这个必须有 text-overflow:ellipsis;（文字溢出用省略号显示
布局技巧
margin负值应用
在使用float的时候，盒子会向左靠齐，如果说盒子border:1px就会在左边形成2px的边框，可以使用margin:-1px进行修改 同时如果说要经过显示的话，需要给盒子添加相对定位，才能保证边框不被后面的盒子覆盖，相对定位是在标准流和浮动的前面显示的，如果说其他也有定位，可以通过z-index进行设置
文字围绕浮动元素
通过给图片增加浮动，文字会自动换行围绕图片
行内块
通过把a等元素转换成行内块元素，在对父级盒子设置text-align:center可以实现行内块元素的垂直居中
