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类图标导入方式
[email protected] {
font-family: ‘iconfont’;
src: url(‘iconfont.eot’);
src: url(‘iconfont.eot?#iefix’) format(‘embedded-opentype’), url(‘iconfont.woff2’) format(‘woff2’), url(‘iconfont.woff’) format(‘woff’), url(‘iconfont.ttf’) format(‘truetype’), url(‘iconfont.svg#iconfont’) format(‘svg’);
}

.iconfont {
font-family: “iconfont” !important;
font-size: 30px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

2.再调用 iconfront
CSS三角形的做法

鼠标样式

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