一、通过css显示剪裁图片

1、使用场景：
为了可以减少客户端对服务器的请求，所以会把很多图片集成于一个图片之上，称为css sprites技术（css精灵/雪碧）。那么如何从集成后的图片中显示我们需要的图片便可以采用clip样式。
css精灵-优点：
【1】减少客户端对服务器的请求，提高性能；
【2】减少图片字节数，多个图片整合入1张图的字节数小于每个图片字节数之和；
【3】减少命名困扰；
【4】修改公共样式方便。
css精灵-缺点：
【1】图片合成有一定成本；
【2】使用时需要精确计算每个单元图片的位置；
2、code

<img src ="图片路径">
img {
	position:absolute;
	clip:rect(TOP LEFT BOTTOM LEFT )
	}

二、隐藏元素的方法

1. visibility:hidden
   特点： 元素仍然占用dom空间，使用visibility:visible可使隐藏的元素可见。

2. opacity:0(透明度为0)
   特点： 用于和transition、animate配合使用实现渐隐渐显，使用opacity:1显示。

3. position:absolute
   特点： 元素仍然占用dom空间， 用于使元素消失于可视区域，改变位置坐标可以用于显示。

4. display : none
   特点： 元素隐藏后不占用dom空间。

5. hidden属性，H5新增
   特点： 除IE浏览器其余都可以使用。

6. tranform：scale(0)
   特点： 元素位置仍保留，通过将元素无限小来实现元素不可见，通过scale(1)位可见；改方法不适用于行元素，IE9以下不支持。

三、让div水平、垂直居中

1. 方法一：

div {
	position : absolute;
	left : 50%;
	top : 50%;
	margin-left :  -width/2;
	margin-top : -height/2;
}

说明：width-div的宽度；height-div的高度

2. 方法二：

div {
	position : absolute;
	left : 50%;
	top : 50%;
	-webkit-transform : translate(-50%,-50%)
}

3. 方法三：

.parent {
	justify-content : center; //令子元素水平居中
	align-items : center; //令子元素垂直居中
	display : -webkit-flex;
}

说明：.parent-div的父级dom

四、文字过长增加省略号

1. 场景一：

html

<div id="name" title="库尔班·吐鲁木">库尔班·吐鲁木</div>

css

#name {
		width:70px;	
		white-space:nowrap;//不换行
		overflow:hidden;  //超出dom的隐藏
		text-overflow:ellipsis;//隐藏的文字部分用省略号代替
}

效果图：

扩展：
1.white-space

2.text-overflow: