CSS高级技巧

精灵图sprites

精灵图：将多个图片（背景图片、图标等）放在一张图片上，实现一张图片多次利用。

精灵图技术的目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

字体图标

字体图标：常用于网页中一些不经常更换、通用的小图标。字体图标看上去是图标，但是本质是文字，可以设置font-size、color等属性，一旦字体加载出来之后，图标马上就会渲染出来，减轻服务器的压力。

注意：字体图标不能替代精灵图技术，只是对工作中图标部分技术的提升和优化。

如何使用：个人比较喜欢阿里巴巴矢量图标库，进入后帮助——代码应用可以查看如何使用，这里仅介绍我自己比较喜欢的一种方式。

Unicode引用

Unicode引用的特点：

1. 兼容性最好，支持IE6+以及所有现代浏览器
2. 支持按字体的方式去动态地调整字体大小、颜色等样式
3. 因为是字体，不支持多色（五颜六色花里胡哨的字）

Unicode使用步骤：
第一步：拷贝下面的代码到css样式文件

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

注意url的值，一般都需要定位到相应的文件上

第二步：定义iconfont的样式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

第三步：打开下载文件中的index.html，查看相应的字体图标编码并复制，然后将样式应用于标签

<span class="iconfont">&#x33;</span>

CSS三角做法

制作三角的思路：利用盒子边框实现，让其中一边不透明，其余三边都透明（transparent）就能实现三角了。

<div class="demo"></div>

.demo {
	width: 0px;
	height: 0px;
	line-height: 0;/*兼容低版本浏览器*/
	font-size: 0;/*兼容低版本浏览器*/
	border-top: 50px solid red;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 30px solid transparent;
}

来看看效果图~

比较一下没有加透明色的原图

CSS三角进阶

.demo {
	width: 0;
	height: 0;
	border-color: transparent red transparent transparent;
	border-style: solid;
	border-width: 22px 8px 0 0;
}

斜三角制作，效果展示（上面的横线是截图所至，直接忽略）

解决图片底部空白缝隙

先来认识一下vertical-align属性，该属性只对行内元素和行内块元素生效

属性值	描述
baseline	默认值，在基线上对齐
top	将元素顶端于行中最高元素的顶端对齐
middle	将元素于最高元素居中对齐
bottom	把元素的顶端与行中最低元素的顶端对齐

一行中各个线的位置说明：

图片底部有空白缝隙是因为默认是vertical-align: baseline;需要改变其样式进行调整改为vertival-align: bottom;、top、middle等。

溢出文字省略号显示

单行文本溢出显示省略号

直接上CSS样式

.nowrap {
	white-space: nowrap;/*强制显示为一行，默认是normal自动换行*/
	overflow: hidden;/*超出部分隐藏*/
	text-overflow: ellipsis;/*文本超出部分用省略号代替*/
}

多行文本溢出省略号显示

多行文本溢出显示，有较大的兼容性，适用于Webkit内核的浏览器或移动端（移动端大部分是Webkit内核），这个部分推荐让后台来做，后台可以设置显示多少个字

.mulnowrap {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;/*弹性伸缩模型*/
	-webkit-line-clamp: 2;/*限制一个块元素显示的文本行数*/
	-webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素排列方式*/
}