254节---------4月27日

元素的显示与隐藏

常见于页面里的小浮窗，可以显示或隐藏，常用的有以下三种：

• display显示隐藏
• visibility显示隐藏
• overflow溢出显示隐藏

---

display属性

用于设置一个元素如何显示

• display：none；隐藏对象
• display：block；除了转换为块级元素外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置

---

visibility可见性

• visibility：visible；元素可见
• visibility：hidden；元素隐藏

隐藏元素后，继续占有原来的位置

---

overflow溢出

类似网站广告，关闭就不见，刷新页面就会重新出现。

overflow属性制定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值如下：

• visble     不剪切内容也不添加滚动条
• hidden    不显示超过对象尺寸的内容，超出的部分隐藏掉
• scroll       不管是否超出内容，总是显示滚动条
• auto        超出自动显示滚动条，不超过不显示

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden，因为它会隐藏多余的部分。

---

精灵图

为什么需要精灵图？

        一个网页中往往会应用很多笑的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，也就是CSS精灵技术。

---

原理：

        将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了，这个大图片也被叫做sprites（精灵图）

---

使用：

• 移动背景图片位置，此时可以用background-position
• 移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同
• 因为一半情况下都是往上往左移动，所以数值是负值
• 使用精灵图时需要精确测量，每个小背景图片的大小和位置