目录
一、元素的隐藏与显示
1.display 显示与隐藏元素
display : none ；<隐藏对象>
display : block ；<除了转换为块级元素之外，同时还有显示元素的意思>
（注意：display 隐藏元素后 不再占有原来的位置！）
（如图，显示出的效果为“火人”粉色盒子被隐藏）
2.visibility 显示与隐藏元素
visibility : visible ； <元素可视>
visibility : hidden ；<元素隐藏>
（注意：visibility 隐藏元素后 继续占有原来的位置！）
（也因此实际中 display 运用更多一些）
（如图，显示的效果为隐藏的盒子仍然占有它原有的位置）
3.overflow 溢出时 显示与隐藏元素
overflow : visible ；<看得见>
overflow : hidden ；<隐藏超出盒子尺寸的内容>
overflow : scroll ；<滚动条显示（无论溢不溢出）>
overflow : auto ；<需要的时候自动变为滚动条形式>
（如图，显示的效果为文本框居中且为滚动条 scroll 形式
二、精灵图
1.精灵技术的目的：
为了有效减少服务器接受和发送请求的次数，提高页面的加载速度。
2.精灵图的核心原理：
就是将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
3.精灵图使用要点：
（1）移动背景图片位置 主要利用 background-position
（2）移动距离以左上角为原点 x往右变大 y往下变大
（3）往上往左是负值
（4）一定注意：是 移动图片 让想要展示的图片出现在盒子里，不是移动盒子！！！（把想要让它出现的图片部分移动到红色的小方框内，而不是移动小方块，下图应该是-->向左移动）
4.具体代码实现：
（以王者荣耀官网图为例）
（如图，效果为只出现大图片中出现在方框内的部分图案）
三、字体图标 iconfont
1.字体图标的本质：
一种高效方便的图标使用方法 —— 展示的是图标，本质是字体。
2.字体图标的优点：
（1）轻量级：一个图标字体比一系列的图像要小，字体一旦加载，图标马上就能渲染出来，减少了服务器请求
（2）灵活性：本质其实是文字，可以随意改变颜色、大小、阴影、透明效果等
（3）兼容性：几乎支持所有的浏览器，可以放心使用
3.区分精灵图和字体图标的使用：
（1）字体图标 --> 用于一些结构和样式比较简单的小图标
（2）精灵图 --> 用于一些结构和样式复杂一点的小图片
（3）字体图标不能替代精灵技术，它只是对图标部分技术的一种提升和优化（注意！）
4.字体图标的素材下载网站（仅为推荐）：
- icomoon 字库 http://icomoon.io（ √ ）
- 阿里 iconfont 字库 http://www.iconfont.cn/
5.如何下载字库里的图标素材：
步骤一：在网站里点击选中想要的图标
步骤二：点击网页右下角的 “生成文字”
步骤三：确认已选择的图标无误后点击右下角的 “下载”
步骤四：下载后得到压缩包，将压缩包解压得到如下几个文件（都有用，一定不要删除！）
6.如何在HTML文件中引用下载好的文字图标：
步骤一：首先把下载好的压缩包解压，得到如下几个文件（都有用）
步骤二： 把文件里面的 font文件夹 放入页面根目录下
（附一个更好理解一点的网图 ↓ ）
步骤三：在CSS样式中全局声明字体（＝把这些文字文件通过css引入HTML文件中）
（注意：具体声明在下载中的 style文件 找！！）
（找到style文件 --> 双击得到以下代码 --> 复制图中蓝色选中的代码即可 ↓ ）
（把选中代码粘贴至HTML文件中 style区域 即可 ↓ ）
步骤四：在demo文件中选择想要使用的图标
（双击进入如下页面 ↓ ）
（复制想选择图标的右边方框，如图中蓝色选中区域 ↓ ）
（最后粘贴在想要让图标出现的盒子里 ↓ ）
7.字体图标的追加：
步骤一：把压缩包里的 selection.json 重新上传
（先进入图标素材网站，点击左上角的紫色图标 ↓ ）
（在弹出的相应框里选中 selection.json 文件 ↓ ）
（最后在弹出的选择框里选择 “yes” ↓ ）
步骤二：最后选中想要的新图标，重新下载压缩包，并替换原文件即可
8.代码实现
效果展示：
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
