CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧

CSS高级技巧目录

1、精灵图

使用原因：一个网页往往会有很多小的背景图片作为装饰，为了有效减少接收和发送请求的次数，提供页面加载速度，所以出现了精灵技术。核心原理就是将小图片整合到一张图里，这样浏览器只需要发送一次请求到服务器就可以了。

属性：background-position

使用原理：先量好背景图片的宽和高，然后创建一个盒子，大小和背景图片一样，插入整张精灵图到盒子中，图片默认都是在盒子的左上角，再看需要的背景图片在X和Y轴的哪个位置，调整好位置即可显示出来。

精灵图属性    

2、字体图标

优点~

字体图标的优点

字体图标使用方法

以icomoon图库为例，挑选需要的图标下载，解压，引入html文件使用。

注意点：1、fonts文件夹需要和html文件放在一起

               2、把解压出来的style.css里的样式复制到html文件style里

               3、复制解压出来的html里面图标对应的方框，到需要添加字体图标的地方

               4、字体图标的字体需要和样式里的字体一致

字体图标使用步骤

字体图标使用步骤

字体图标使用步骤

字体图标更新追加方法

字体图标更新追加

阿里巴巴矢量图标库

1.搜索--加入购物车--添加至项目---下载到本地--解压，挑选字体文件格式（四种：eot/svg/ttf/woff，建议放入单独的字体文件夹 ）与样式文件

iconfont.css（head中引入）---若将字体文件与样式文件单独放，在css文件中修改字体src地址，改成对应的；

2.写入公共样式.iconfont,使用i标签插入; 通过class名引入到body中，class名称为iconfont.css中对应图标的class名;

举例

CSS三角做法

4、CSS用户界面样式

（1）更改用户的鼠标样式；（2）表单轮廓；（3）防止文本域拖拽

（1）更改用户的鼠标样式cursor

鼠标样式cursor

（2）去除表单的默认蓝色轮廓outline

input ： ｛outline：none或者0｝

表单蓝色轮廓线

（3）防止拖拽文本域resize

textarea ： ｛resize：none或者0｝

文本域拖拽

5、vertical-align属性应用（设置元素垂直对齐，行内块）

设置元素垂直对齐

6、溢出文字省略号做法

                                 单行文本省略号

单行文本省略号

               多行文本省略号（了解，兼容性差，更推荐让后台做）

                        overflow: hidden;

                        text-overflow: ellipsis;

                        display: -webkit-box;

                        -webkit-line-clamp: 2;

                        -webkit-box-orient: vertical;

                        white-space: normal !important;

                          word-wrap: break-word;

7、常见布局技巧

（1）margin负值运用，避免边框重叠变粗，如边框为1px，则margin-1px

margin负值运用

如果需要鼠标经过时改变边框颜色，先伪类颜色，然后加上一句提升层级，相对定位（其他定位不保留位置，会影响后面盒子）或者z-index，因为前面设置了margin负值，压住了盒子一个边框，所以需要加一句提升层级，使得鼠标经过某个盒子时，提高它的优先级完整显示出来。

（2）文字围绕浮动

利用浮动只会压住标准流盒子，不会压住里面的内容，可以布局文字围绕效果。先设置一个大盒子，里面左右一个盒子放图片和文字，给图片的盒子设置大小并浮动，文字自然环绕。

（3）行内块运用

行内元素，行内块元素可以用text-align：center水平居中

行内块运用

3、三角强化运用

三角强化运用

overflow: hidden;

            text-overflow: ellipsis;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            white-space: normal !important;

            word-wrap: break-word;