一，字體圖標
1，下載字體圖標：
登錄iconfont（https://www.iconfont.cn/）
搜索需要的圖標
將需要的圖標添加入庫（購物車圖標）
點擊右上角購物車圖標
選擇下方添加至項目（沒有項目選擇新建項目再添加）
在項目界面點擊下載至本地
最后將文件解壓，且重命名文件夾為"iconfont"，放到代碼根目錄
2，字體圖標引用
一般用 i 標簽來承載字體圖標
①本地引用：
用link標簽選擇iconfont文件夾里的iconfont.css
②在線引用（不推薦）
用link標簽掛上項目中的在線鏈接，注意連接前面需要加上http
3，字體圖標的屬性修改
字體圖標的本質是文字，可以直接用font-zise，color修改大小和顏色
但是要注意，不要直接使用默認類名，應該再給 i 標簽添加一個類名如：icon1
二，平面轉換（transform）
平面轉換主要有：
transform: translate(-50%, -50%);————平移
transform:rotate(-360deg);————旋轉
transform: scale(1.2);————縮放
0，轉換中心——transform-origin
元素轉換默認以元素正中心為原點，可根據需要改變。
如 transform-origin：left bottom；
表示轉換中心變更為元素左上角
如 transform-origin：50px 50px；
表示轉換中心變更為（以左上角0px 0px為原點計算）50px 50拼px。
1，平移translate
x軸正方向朝右，y軸正方向朝下。
如果用百分比，則以自身為參照。
也可以用具體像素值，則以原來的位置為參照。
如果用方位名詞：left，right，center，bottom，top，則以父盒子為參照
2，旋轉rotate
旋轉一定要帶單位deg，負號表示逆時針旋轉。
3，縮放scale數(shù)值小于1表示縮小，大于1表示放大。
三，漸變linear-gradient( );
漸變指背景色漸變
background-image: linear-gradient(36deg, #59C173, #a17fe0, #5D26C1);
其中36deg可省略，意為漸變方向，默認值為180deg，180deg表示6點鐘方向，即從上往下漸變，
也可以使用方位名詞，如right表示向右（從左往右）漸變。
四，回顧
1，子絕父相：圖層覆蓋顯示，常用子絕父相完成。
2，p::after{}，此為偽元素，默認為行內元素無法設置寬高，且必須要添加content屬性
3，超出顯示范圍需要隱藏元素，用 overflow: hidden;（不占位置）
4，多種平面轉換需要進行連寫，否則會被覆蓋：
transform: translateX(600px) scale(1.2);
5，旋轉會導致元素方向改變（x軸，y軸），連寫時先旋轉再平移和先平移再旋轉效果不一樣。
6， transition: 1s;——表示花費1秒時間來過渡，誰過渡寫在誰的選擇器里面
7，p:hover::after{}——表示當鼠標移到p上時，p里面的為元素p::after狀態(tài)改變，若需求是鼠標移動到p的父級.box時，則為：.box:hover p::after{}——（hover和p之間有一個空格）
