移动web字体图标平面转换学习

移动端第一天学习笔记

字体图标

• 如何使用字体图标？
  使用字体图标：
  在标签类加上iconfont，并引入CSS后缀的图标样式表（iconfont）

---

方法①
使用unicode编码

&#xe6eb  /* &#字符实体 x十六进制 */

unicode编码的含义

例：

直接在标签内容里输入编码，在标签类加上iconfont，或给标签加上font-family:’iconfont’

---

方法②
直接加类
在标签里加入至少两个类，iconfont+icon-lishijilu（例），当成字体用，可以再加额外类标签进行修饰.

---

方法③
伪元素法

.box::after{
	font-family:iconfont;
	/* &#xe77a 这里应该转换成e77a */
	content: 'e77a';
	color: green;
	}

其中,font-family也可以不写，换成在标签中加上iconfont也可

---

平面转换-transform

位移效果：transform:translate(水平，垂直）
–如要用百分比表示单位，参照物为盒子自身尺寸
对行内元素没有效果

※补充（后续会单独补充）：

已知的盒子水平居中的几种方法：

①absolute+负margin(子盒子宽高的一半）【条件是得知道子盒子的宽高】

position:absolute;
top:50%;
left:50%;
margin-left: -50px; /*top相当于高度，left相当于宽度*/
margin-top: -50px;

②absolute+margin auto

position:absolute;
left:0;
right:0;
top:0;
buttom:0;
margin:auto;

③transform

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

---

一些css修饰样式：

旋转–transform:rotate(角度) 单位：deg

转换圆点-transform-origin:(点水平)(点垂直)

• 转换原点不要写在hover里
• 取值一般都会写方位名词(right left)
• 多重转换技巧（也就是旋转和位移叠加） 要先写位移

缩放-transform:scale(x缩放，y缩放)

• 如果只写一个值，那么皆用于x和y值
• 值要写数字，可以是0/1/1.2等
• 有transformY/transformX 单方面取值

渐变-background-image:linear-gradient（颜色1，颜色2）

• 例如background-imga:linear-gradient(transparent, rgba(0,0,0,.8)

---

额外学习：
opeacity : 元素隐藏 1显示/0隐藏
transparent 透明