字體圖標(biāo)
優(yōu)點：
1.靈活性：靈活地修改樣式届腐，例如：尺寸、顏色等
2.輕量級：體積小蜂奸、渲染快犁苏、降低服務(wù)器請求次數(shù)
3.兼容性：幾乎兼容所有主流瀏覽器
下載字體圖標(biāo)(https://www.iconfont.cn/)
步驟:
1.百度搜索iconfont
2.素材庫或者搜索欄去搜索你想添加的字體圖標(biāo)
3.點擊你想要添加的某個字體圖標(biāo)的購物車
4.點擊右上角的購物車
5.選擇添加至項目(沒有項目的要新建項目)
6.下載至本地，解壓文件扩所，放在需要使用的文件夾的根目錄
使用方法
一围详、unicode編碼使用法
1.引入下載好的字體圖標(biāo)文件夾的iconfont.css
2.利用空標(biāo)簽(大部分都是用i標(biāo)簽)去承接unicode編碼內(nèi)容
3.聲明字體圖標(biāo)庫font-family：iconfont
二、class使用法
1.引入下載好的字體圖標(biāo)文件夾的iconfont.css
2.類名
第一個類名是固定的：iconfont;
三助赞、搭配偽元素
1.引入下載好的字體圖標(biāo)文件夾的iconfont.css
2.聲明字體圖標(biāo)庫font-family：iconfont
3.content: "";填入unicode編碼
平面轉(zhuǎn)換
屬性：transform（transform可以改變盒子的層級關(guān)系，提高盒子的層級）
一.平面轉(zhuǎn)換transform: translate(水平移動距離, 垂直移動距離);
1.取值：
①像素單位數(shù)值
②百分比（自身取值的百分比袁勺，與父盒子無關(guān)）
2.技巧
①translate()如果只給出一個值, 表示x軸方向移動距離
②單獨設(shè)置某個方向的移動距離：translateX() & translateY()
3.絕對定位居中
①父元素添加position: relative
②子元素添加position：absolute
二雹食、旋轉(zhuǎn)transform: rotate
語法：transform: rotate(角度);角度單位是deg
三、轉(zhuǎn)換原點transform-origin
1.語法：
①默認(rèn)圓點是盒子中心點
②transform-origin: 原點水平位置 原點垂直位置;
2.取值：
①方位名詞（left期丰、top群叶、right、bottom钝荡、center）
②像素單位數(shù)值
③百分比（參照盒子自身尺寸計算）
四街立、多重轉(zhuǎn)換
目標(biāo)：使用transform復(fù)合屬性實現(xiàn)多形態(tài)轉(zhuǎn)換
語法：transform：translate（） rotate（）
注意點：屬性之間用空格隔開，translate要寫在前面化撕，如果rotate寫在前面會改變坐標(biāo)軸向
五几晤、縮放transform: scale
語法
①transform: scale(x軸縮放倍數(shù), y軸縮放倍數(shù));
②scale值大于1表示放大, scale值小于1表示縮小
漸變
使用background-image屬性實現(xiàn)漸變背景效果
一般用于設(shè)置盒子的背景
1.語法：background-image: linear-gradient
2.用法
①默認(rèn)的方位從上到下
②方位名詞：例如：從左到右漸變 to right,從左上到右下漸變 to right bottom
③角度deg：直接寫度數(shù)即可，不用再加to
遮罩層漸變的使用方法
①設(shè)置子絕父相
②background-image: linear-gradient(transparent,rgba(0, 0, 0, 0.0))
③opacity
