CSS高级技巧—精灵技术、字体图标、三角、用户界面样式、表单轮廓、vertical-align属性、文字溢出省略

CSS高级技巧

CSS精灵技术

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称为CSS Sprites、CSS 雪碧）

精灵图技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大的图片中，移动背景图图片的位置，可以使用background-position，移动距离就是目标图片的x和y坐标，一般往上往左移动，所以一般是负值。使用精灵图的时候要精确测量每个背景图片的大小和位置。

缺点：图片文件比较大；图片本身放大或者缩小会失真；一旦图片制作完成想要更换很复杂。

---

字体图标（iconfont）

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标很好的解决了精灵图的缺点。

优点：

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

但是字体图标不能取代精灵技术，只是对工作中图标部分技术的提升和优化。如果遇到一些结构和样式比较简单的小图标，就用字体图标；如果遇到一些结构和样式复杂一点的小图片就用精灵图。

字体图标的下载

1. icomoon字库 http://icomoon.io

2. 阿里 iconfont字库 http://www.iconfont.cn/

字体图标的引入

1. 把字体图标的fonts文件夹放到页面的根目录下面。

2. 在C SS样式中全局声明字体

   @font-face {
       font-family: 'icomoon';
       src: url('fonts/icomoon.eot?7kkyc2');
       src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
           url('fonts/icomoon.eot?7kkyc2') format('tryetype'),
           url('fonts/icomoon.eot?7kkyc2') format('woff'),
           url('fonts/icomoon.eot?7kkyc2#icomoon') format('svg');
       font-weight: normal;
       font-style: normal;
   }
   

3.打开demo.html找到对应的图标，复制后面的小方框，粘贴到盒子中。给span指定一个字体icomoon。

字体图标的追加

如果原先的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的selection.json重新上传到icomoon，然后选中自己想要的新图标，重新下载压缩包，并替换原来的文件即可。

---

CSS三角

网页中常见的一些三角形可以使用CSS直接做出来。

给一个高度和宽度均为0px的盒子，设置上下左右边框

得到如下

因此，可以通过一条边框设置颜色，其余三条边框设置透明色来得到三角形。

例如：

.box {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: pink;
}

得到如下三角形

---

CSS用户界面样式

界面样式，就是更改一些用户操作样式，以便提高用户体验。

更改用户的鼠标样式(cursor)

li {style="cursor: pointer;" }

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

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

    <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>

表单轮廓(outline)

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

input {outline: none;}

防止表单域拖拽(resize)

防止文本框被拉缩。

textarea { resize: none;}

*文本域<textarea>最好写在一行。

---

vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字的对齐。【用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效）

语法：

vertical-align : baseline | top |middle |bottom

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

图片默认和文字的 基线对齐，因此给图片添加边框，图片下方会有空白空隙，可以改变对齐方式来取消图片下方的空白缝隙（只要不是基线对齐均可）。或者将图片转换为块类元素。

---

文字溢出省略

单行文字溢出省略

1. 将要显示的文字强制一行显示

   white-space: nowrap;
   

2. 超出的部分隐藏

   overflow: hidden;
   

3. 文字用省略号替代超出的部分

   text-overflow: ellipsis;
   

多行文本溢出省略

多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）

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

动端大部分是webkit内核）

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