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

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

显示隐藏元素

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>□</span>

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

用iconfont时

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

2.link 外部引入css

3.<span class="iconfont"> #x26f3; </span> (用类名字体样式复制过来)

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 禁止