必须掌握的前端开发基础知识，什么是字体图标？20240823更新

　　必须掌握的前端开发基础知识,什么是字体图标?

　　显示隐藏元素

　　display显示隐藏

　　none 隐藏

　　block 显示

　　隐藏后不再占有原来的位置

　　visibility

　　隐藏元素后,继续占有原来的位置

　　visible 元素可见

　　hidden 元素隐藏

　　overflow

　　hidden 溢出隐藏

　　scroll 溢出的部分显示滚动条, (不溢出也隐藏)

　　auto 在需要的时候添加滚动条(溢出的时候才显示,不溢出不显示)

　　如果有定位的盒子慎用隐藏hidden,因为它会隐藏多余的部分,故意漏出的就不用.

　　透明: opacity:0 1不透明

　　精灵图(sprites 也叫雪碧图)

　　为了有效减少服务器接收和发送次数,提高页面的加载速度

　　background-position

　　y往上 x 往左 是负值 一般是负值或者是0

　　主要针对背景图使用

　　字体图标

　　结构样式较简单的小图标用字体图标,可以改颜色放大不失帧,可以旋转做阴影

　　①把下载包里面的fonts(字体文件夹) 文件夹放入页面根目录下

　　② 字体文字引入(字体声明)@font-开始.....font-dispay -block结束 注意路径问题

　　④span{ font-family : "icomoom"} (指定字体)

　　用iconfont时

　　1.第一步直接拷贝iconfont文件到根目录

　　2.link 外部引入css

　　Unicode 用的是内容

　　Font class 类名 (用这个时要提升权重的话用并集)

　　复制声明过来需要改变前面的路径

　　字体图标追加: selection.son 重新上传

　　css 三角的做法:

　　width:0

　　height:0 (没有高宽)

　　border:50px solid transprent ;

　　border -left -color :red

　　正方形把需要的两条边留下,再把不用的边透明掉, 如果想要三角形变长就把一边变短

　　用户界面样式:

　　鼠标样式:cursor

　　default 小白默认

　　pointer 小手

　　move 移动

　　text 文本

　　not-allowed 禁止