web额外补充

## 复合选择器——指定选择器

li.current       表示 选中具有current  这个类的li标签

.box.current    表示选中同时具有这两个类的标签

## 盒子的隐藏和显示

display: none     隐藏盒子

display: block     把隐藏的盒子显示出来

visibility: hidden   占位

## 文字间距和词间距

letter-spacing

word-spacing

## 一行文字超出用省略号代替

/*设置1行文字超出用省略号代替  */

width: 200px;

/* 让文本不换行显示 */

white-space: nowrap;

overflow:hidden;

/* 使用省略号代替溢出部分 */

text-overflow: ellipsis;

/*设置最多不超过2行， 固定写法，复制即可*/

width: 200px;

overflow:hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

## 鼠标样式cursor

 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

 鼠标放我身上查看效果哦：

<ul>

  <li style="cursor:default">我是小白</li>

  <li style="cursor:pointer">我是小手</li>

  <li style="cursor:move">我是移动</li>

  <li style="cursor:text">我是文本</li>

  <li style="cursor:not-allowed">我是文本</li>

</ul>

## CSS精灵 css sprite    雪碧图

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

优势：减少对服务器的请求 ，减轻服务器的压力。

## 样式重置cssreset

body,button,dd,dl,dt,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}

body,button,input,select,textarea,a{font:12px/1.6em Microsoft Yahei,Heiti,NSimSun,SimSun,FangSong;}

h1,h2,h3,h4,h5,h6{font-size:12px; font-weight: normal;}

ol,ul{list-style:none}

a{text-decoration:none}

a:hover{text-decoration:underline}

img{border:0}

button,input,select,textarea{font-size:100%; outline:none;}

textarea{resize:none;}

button{border-radius:0}

table{border-collapse:collapse;}

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }  

.clearfix {*zoom: 1;}