CSS高级技巧

1、CSS精灵技术

sprite 减少请求次数

合成一张大图片(精灵图,雪剪图)
处理网页背景图像的方式

2、字体图标

iconfont UI.svg(UI提供) 可以无限放大

1)上传字体包
国外:http://icomoon.io
阿里:http://www.iconfont.cn/
2)告诉别人我们生成的文字图标
@font-face{} 声明字体,电脑里没有
3)使用引用
font-family:"iconmoon" 自定义
html 找 复制
标签::before{content:"\eqq0"}
4)追加新图标
导入.json 重新下载

3、滑动门技术

背景自由拉伸适应文字多少

用到CSS精灵.padding 撑开

span 不给宽度 用padding

4、其他一些小技巧

鼠标样式 style = "cursor: default ""

• default 小白
• poniter 小手
• move 移动
• text 文本

取消轮廓线 outline:0
防止拖拽文本 resize:none
垂直对齐 vertical:align
去除图片底侧有空隙 display:block vertical-align:top/middle
溢出文字隐藏 word-break 自动换行