前端笔记—从入门到坟墓[CSS][精灵图与溢出样式][10]

css精灵图技术（Sprites）

产生原因：
网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。

CSS Sprites 的优点（更多优点）
1、减少图片的字节。
2、减少了网页的http请求，从而大大的提高了页面的性能。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

> 例：利用精灵图实现硬币转动。

思路：首先利用position: absolute属性使li标签进行堆叠，然后为所有li标签设置相同的背景，通过背景位置（依次向左移动70像素）的调整实现不同背景的li标签，最后利用定时器逐个隐藏li标签，最终实现动画效果。
在这里插入图片描述

ul li{
    list-style:none;
    position: absolute;
    width: 70px;
    height: 100px;
    background: url(img/coin.jpg) no-repeat;
}
ul li:nth-child(1){
    background-position-x:0px;
    z-index: 7;
}
ul li:nth-child(2){
    background-position-x:-70px;
    z-index: 6;
}
ul li:nth-child(3){
    background-position-x:-140px;
    z-index: 5;
}
ul li:nth-child(4){
    background-position-x:-210px;
    z-index: 4;
}
ul li:nth-child(5){
    background-position-x:-280px;
    z-index: 3;
}
ul li:nth-child(6){
    background-position-x:-350px;
    z-index: 2;
}
ul li:nth-child(7){
    background-position-x:-420px;
    z-index: 1;
}

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

var liNodeList = document.getElementsByTagName("li");
var i=0 ;
var t = setInterval(function () {
    liNodeList[i].style.display = 'none';
    i++;
    if(i==7){
        i=0;
        for (var j = 0; j < liNodeList.length; j++) {
            liNodeList[j].style.display = 'inline-block';
        }
    }
},150);

使用图片：
在这里插入图片描述

相关属性

> 隐藏与显示

参考资料：CSS隐藏元素 display visibility opacity的区别

1，利用display隐藏与显示，属性：
none隐藏，且不占位置，无法点击。
block显示。

2，利用visibility（音译：能见度）（可见性）实现隐藏与显示，属性：
visible默认值。显示。
hidden隐藏，占据空间，无法点击。
inherit 规定应该从父元素继承 visibility 属性的值。

3，利用opacity（音译：不透明性）实现隐藏与显示，属性：
opacity: 0隐藏，占据空间，可以点击。
opacity: 1显示。

4，利用position: absolute实现隐藏与显示：

position: absolute; 
top: -999em;

隐藏，不占据空间，无法点击。

注：常用于网站logo文本隐藏。

5，利用position: relative实现隐藏与显示：

position: relative; 
top: -999em;

隐藏，占据空间，无法点击。

6，利用absolute与hidden实现隐藏与显示：

position: absolute;
visibility: hidden;

隐藏，不占据空间，无法点击。

7，利用overflow实现隐藏与显示：

height: 0;
overflow: hidden;

隐藏，不占据空间，无法点击。

> overflow溢出隐藏

overflow规定当内容溢出元素框时发生的事情。
属性：
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承overflow属性的值。

> 鼠标样式

cursor属性规定要显示的光标的类型（形状）。
详解：
W3school CSS cursor 属性
常用属性：pointer小手，text光标指示文本，move四个箭头，对象可被移动，defanlt默认光标（通常是一个箭头）。

> text-overflow溢出隐藏

text-overflow 属性规定当文本溢出包含元素时发生的事情。
属性：
clip修剪文本，不显示省略号。
ellipsis显示省略符号来代表被修剪的文本。
string使用给定的字符串来代表被修剪的文本。

注：一般同white-space:nowrap（规定段落中的文本不进行换行）和overflow：hidden（溢出隐藏）同时使用。

例：

p{
	width: 200px;
	background-color: #ccc;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

 <p>1，利用display隐藏与显示，属性：none隐藏，且不占位置，无法点击。block显示。2，利用visibility（音译：能见度）（可见性）实现隐藏与显示，属性：visible默认值。显示。hidden隐藏，占据空间，无法点击。inherit 规定应该从父元素继承 visibility 属性的值。3，利用opacity（音译：不透明性）实现隐藏</p>

在这里插入图片描述