标签：top 用法 font 垂直居中 网址 root 缺点 格式 中文
搜狗：tubiao/icon
小图标的处理方法有三种：
一，最直接就是切图放在文件中进行读取
缺点：
1，多次HTTP请求，影响性能
2，不方便修改和维护。（每次修改都要重新修改美工修改图片大小，颜色等等）
二，使用base64，把图片转换为base64代码
本质：把小图标通过Base64转换成 Base64格式的图片 或者是 二进制编码
1，打开网址：https://www.sojson.com/image2base64.html
2，点击选择文件---选择需要转换的图片---确定---等待转换完毕
3，经过Base64 编码后的文件体积一般比源文件大 30% 左右
4，浏览器一般都有限制最大值，Opera9~11 限制为 64K，IE8 限制为 32KB
优点：
1，减少HTTP请求
缺点：
1，不兼容IE 6 / IE 7
2，编码后比原图大 30% 左右
3，手动修改，更麻烦
4，二进制编码是不能作为对象单独缓存的，除非缓存整个页面。
三，通过CSS画一个小图标(一般都是比较简单的图标)
使用该种方法一般要提前和美工商量好的。
小图标可以使用<i></i>标签：
CSS代码画三角形如下：
向上的三角形：
.triangle {
margin-left: 8px;
height: 0;
width: 0;
border: 6px solid transparent;
border-top: none;//不设置，在控制台空看出，图标的高度莫名的占据了12px,计算了透明的上边框。
border-bottom: 6px solid blue;
}
向下的三角形：
.triangle {
height: 0;
width: 0;
border: 6px solid transparent;
border-bottom: none;//必须设置，否则向下图标会跑动。
border-top-color: red;
}
优点：
1，减少HTTP请求
2，兼容性好
3，简单不麻烦，性能好
4，跟原图不会一模一样，许提前跟设计或者交互提前沟通。
缺点：
1，不兼容IE6及以下浏览器
四，使用图标字体
本质：就是字体，只是长了一个图像的脸，说白了就是特殊符号。
怎么修改字体就怎么修改图标字体。
优点：
1，矢量图，不失真
2，减少HTTP请求
3，兼容性好
4，简单操作，怎么操作字体，就怎么操作图片字体(如颜色，大小等)
缺点：
1，基本作用于小图标
2，有时无法百分百还原设计稿(因为图标大小无法和设计稿一模一样)
建议在设计之前就和设计或者交互沟通好。
获取图标字体的网站有两个：
1，国外网站：https://icomoon.io/ 一般要付费的,速度比较慢，使用英文搜索
2，阿里巴巴矢量图标库：https://www.iconfont.cn/home/index 响应速度相对快，且免费的。使用中文搜索
解析下阿里巴巴矢量图标库的使用方法：
1，打开网站： https://www.iconfont.cn/home/index
2，使用中文搜索，输入需要的图标如：搜索，购物车，箭头等等。
鼠标点击图标中购物车图标，先加到购物车中，等等一起下载。
3，把所有需要的图标字体添加到购物车中，点击下载代码，全部下载---右键解压出来。
4，在项目中创建一个文件夹名字叫font , 和 css 平级，把文件以下5个文件复制到font中：
iconfont.eot iconfont.svg iconfont.ttf iconfont.woff iconfont.woff2
这 5 个文件是用于兼容其他浏览器，因为不同的浏览器支持的格式不同。
5，同时使用编辑器打开文件 iconfont.css 复制里面的所有内容，把它放到一个css文件中，并且引用该样式。
6，修改 @font-face 中的 引用以下5个文件：iconfont.eot/iconfont.woff/iconfont.svg/iconfont.ttf/iconfont.woff2 的所有 url 的相对地址。
这里面的所有 url 都是引用文件夹 font 里面的字体，注意相对路径的书写，千万别写错了。
其中有一个 url(‘data:application...‘) 这里千万别进行修改，否则直接报错。
7，把 @font-face 中的 类名 .iconfont 和 .icon-jiantoushang(就是需要显示的图标字体的类名) 放到需要显示的标签的类里面即可正常显示。
比如需要在标签 i 显示 下拉箭头，有两种方式，如下：
第一种：
<i class="iconfont icon-jiantoushang"></i> 这样即可正常显示 向上的箭头。
第二种：
<i class="iconfont "></i> 这样即可正常显示 向上的箭头。
注意编码：  是从 demo_index.html中获得的，
打开demo_index.html帮助文档 可以看到每个图标字体下面都有相应的unicode编码，
不同的是，以上编码是 使用 &#x 代替了 unicode 编码的 斜杆
如果使用了unicode的编码，那么就不需要 icon-jiantoushang 这些图标字体类了，可以删了，只留一个对象@font-face 一个类.iconfont
后面具体的图标字体类就不需要了。
难点：
如：这里使用的是下拉列表向下的图标字体
.dropdown-arrow {
/* i 标签有时要设置为行内块级元素才可以进行旋转，transform:rotate(180deg);*/
display: inline-block;
/* 设置所有字体的高度不继承父元素的行高*/
line-height: 1;
/* background-repeat: no-repeat; */
}
搜狗：css CSS原生变量 :root{ --columns: 5; }yangshiyouxianji (样式优先级)link 链入外部样式xuanzeqi (jQuery选择器)mingmingguifan (命名规范)textalign 元素内文本水平对齐方式vertical 多种方案：对文本元素上下左右垂直居中font 设置复合文字字体overflow/yichu 对文本溢出是否换行的操作wenbenyangshi 单词和字母的间距，文本修饰和文本缩进word-spacing、letter-spacing、text-decoration、text-indentjuzhong/chuizhijuzhong 上下左右垂直居中liebiao/list 设置有无列表的样式，及列表一些属性position 相对、绝对，固定，磁贴定位buju/shengbeibuju/shuangfeiyibuju 经典布局(行/列布局，混合布局:圣杯布局，双飞翼布局)xuanzeqi 包括CSS3选择器和Jquery选择器yuanjiao/borderradius 圆角属性yinying/boxshadow 盒模型的阴影border/borderimage 用图片做为边框的背景图片xianxingjianbian 线性渐变jingxiangjianbian 径向渐变wenbenyinying/yinying 设置文本阴影transform 转换rotate translate scale skewtransition/guodu 动画过渡animation 动画语法及实例luanma 解决乱码问题teshufuhao 网页上的一些特殊符号chaolianjie a标签 锚 下载 邮箱等等get/post 方法innertext 设定通用方法获取指定对象的文本内容ajax ajax 的用法及其封装json json语法以及如何使用ajax进行访问该数据jsonp/kuayu 如何使用JSONP进行跨域访问数据html HTML5的标签总结
JavaScriptjavascript js的组成等基础bianliang 9种数据类型可以作为变量shujuleixing/jibenshujuleixing 具体的基本数据类型及其注意点zuoyongyu 全局作用域，局部作用域，构成作用域链yujiexi 预解析的过程和实例laji/neicun 垃圾收集机制和内存问题number/parseint/parsefloat 把字符串转换为数值string 对字符串的各种操作、以及把指定对象转换为字符串。boolean 布尔值true/falsesanyuanyunsuanfu 三元运算符 a?b:cluojiyunsuanfu/yu/huo/fei 逻辑运算符：与 或 非bijiaoyunsuanfu 比较运算符:> < >= <= == != === !==suanshuyunsuanfu/jiajianchengchu 加减乘除取模alert/prompt/shurukuang/jinggaokuang 提示框和警告框if/for/while/switch 三种条件语句的语法及实例duanlucaozuo 短路操作就是使用：逻辑运算符 或||for for实例/水仙花等break/continue 结合上面循环语句进行跳出循环function js函数的语法hanshu 函数的定义，即各种函数return 函数的各种返回值arguments 函数中的arguments各种属性
js内置函数：String 对字符串的各种操作Array 数组Date 获取时间Math 获取js内部的各种函数
标签：top 用法 font 垂直居中 网址 root 缺点 格式 中文
原文地址：https://www.cnblogs.com/Knowledge-is-infinite/p/11333419.html
