CSS高级技巧

一、精灵图

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

精灵图主要针对背景图片使用。

使用精灵图的核心是设置背景图片 的 backgroud-position （负值）。

二、字体图标

主要用于显示网页中通用、常用的一些小图标。

字体图标有什么优点？

轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出 来，减少了服务器请求；

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等；

兼容性：几乎支持所有的浏览器，请放心使用。

三、CSS 做三角形

核心原理是CSS 中边框连接处是斜边连接的三角形的步骤

指定盒子的宽、高为 0 让四条边都靠在一起；

2. 用 border 属性绘制透明边框border: 100px solid transparent;

3. 需要哪个方向的三角形，就给哪个方向指定颜色（顺序：上右下左）border-color: red green blue orange;

4. 设置行高和字体，以保证兼容性line-height: 0; font-size: 0;

1. 绘制三角形时先选择红色方便调整定位； 2. top 用负值表示向上移动； 3. 移动的距离是两倍的边框宽度； 4. 后不要忘记把三角形的颜色设置成父盒子的颜色。

四、鼠标样式

取消表单输入框的轮廓outline: none;

vertical-align 实现行内块和文字垂直居中对齐

如何解决图片底边的缝隙？

添加 vertical—align ： middle | top | bottom （推荐使用）； 把图片转换为块级元素 display: block; 。

五、 单行文字溢出省略号显示

/* 1. 强制在一行显示文本，默认 normal 会自动换行 */ white-space: nowrap;

/*2 . 超出的部分隐藏 */ overflow: hidden;

/* 3. 文字用省略号替代超出的部分 */ text-overflow: ellipsis;

多行文字溢出省略号显示

/*1. 超出的部分隐藏 */ overflow: hidden;

/*2. 文字用省略号替代超出的部分 */ text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */ display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient: vertical;