2020.10.9前端 显示与隐藏 CSS高阶技术（精灵图 字体图标 三角形的做法 用户界面：鼠标样式 文本框蓝色外框消除）

显示与隐藏（不保留原来的位置）
1.display: none;(隐藏)
displ：block;(出现)
2.visility
visibility: hidden(隐藏保留原来的位置) visible（显现） inherit(继承父级的visibility)
3.overflow(文字超过方框是否影藏)
overflow: hidden(隐藏) visible（不影藏）scroll（隐藏并一定加滚动条）auto（只有当隐藏时加滚动条）

---

精灵图
用于减少服务器的负担
在这里插入图片描述

注意：方向是对background进行移动
字体图标
class类图标导入方式
1.在阿里巴巴图标库下载文件到根目录中
2.在style中调用下载文件中的iconfont.css文件：
3.在css直接调用图标名就行了<i class="iconfont icon-xiangxia"></i>
4.改变图标大小要到iconfont.css文件中修改

CSS三角形的做法

---

鼠标样式

style=“cursor: pointer(小手) text move（十字移动）"
取消文本框样式
textarea
outline: none;
取消文本域被拖拽
resize: none;