html css图标怎么跟文字并排,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;