CSS：常见技巧

---

精灵图

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

精灵图的使用：

• 精灵图主要针对于小的背景图片使用。
• 主要借助于背景位置来实现background-position。
• 一般情况下精灵图都是负值。

精灵图缺点：

• 图片文件还是比较大的。
• 图片本身放大和缩小会失真。
• 一旦图片制作完毕想要更换非常复杂。

---

字体图标

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点：

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
• 兼容性：几乎支持所有的浏览器。

字体图标是一些网页常见的小图标，直接网上下载即可。

---

三角

width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: red;

效果：

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;

效果：

---

鼠标样式

li { cursor: pointer; }

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

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

---

轮廓线outline

给表单添加outline: 0或者outline: none样式之后，就可以去掉默认的蓝色边框。

input { outline: none; }

---

防止拖拽文本域resize

设置文本域右下角不可以拖拽：

textarea { resize: none; }

---

行内块和文字垂直居中对齐

vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。只针对于行内元素或者行内块元素有效。

vertical-align: baseline | top | middle | bottom;

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

---

解决图片底部默认空白缝隙问题

图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

• 给图片添加vertical-align: middle | top | bottom等。
• 把图片转换为块级元素display:block。

---

文本溢出显示省略号

单行文本溢出显示省略号：

/* 先强制一行内显示文本，(默认normal自动换行) */  
white-space: nowrap;  
/* 超出的部分隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

多行文本溢出显示省略号：
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端。

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

---

margin的巧妙运用

• 让每个盒子margin往左侧移动-1px，可以压住相邻盒子边框。
• 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则功加相对定位（保留位置），如果有定位，则加z-index)。