二、元素的显示与隐藏
让一个元素在页面中消失或者显示出来
| 属性 | 区别 | 用途 |
|---|---|---|
| display 显示 （重点） | 隐藏对象，不保留位置 | 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 |
| visibility 可见性 （了解） | 隐藏对象，保留位置 | 使用较少 |
| overflow 溢出（重点） | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |
2.1.display显示
display 设置或检索对象是否及如何显示。
display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有显示元素的意思。
特点： display 隐藏元素后， 不再占有原来的位置
💡💡
实际开发场景：
配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛
2.2.visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏
visibility：visible ; 元素可视 visibility：hidden; 元素隐藏
特点： visibility 隐藏元素后，继续占有原来的位置
2.3.overflow 溢出
- overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么
💡💡
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
overflow: hidden;
/* scroll移除的部分显示滚动条 */
overflow: scroll;
/*auto超出自动显示滚动条，不超出不显示*/
overflow: auto;
overflow:visible;三、 精灵图
3.1.使用精灵图目的
为了有效地减少服务器接收和发送请求的次数 ，提高 页面的加载速度 ，出现了 CSS 精灵技术**（也称 CSS Sprites、CSS 雪碧）
原因：
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
原理：
将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了
3.2.精灵图（sprites）的使用
💡💡
使用精灵图：
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图片也称为 sprites 精灵图 或者 雪碧图
- 移动背景图片位置， 此时可以使用 background-position 。
- 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
- 因为一般情况下都是往上往左移动，所以数值是负值。
- 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
2、测量字母的大小及坐标
- 通过矩形选框工具，测量字母的大小，并将div的大小设置为字母的大小。
- 打开窗口菜单栏中的信息，可以查询字母width、height、x轴和y轴的信息。
- 将鼠标光标移动到字母的左上角位置，通过右侧的信息面板测出x和y的值。
- 在css中编写style样式，通过background-position定位到字母所在的位置。
- 精灵图主要针对于小的背景图片使用。
- 主要借助于背景位置来实现---background-position 。
- 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
四、 字体图标
4.1.字体图标产生
精灵图有诸多优点的，但是缺点很明显。
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
字体图标 iconfont很好的解决了以上问题。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
4.2.字体图标的优点
💡💡
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
- 兼容性：几乎支持所有的浏览器，请放心使用
- 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
