CSS高级技巧

1.精灵图

1.1精灵图的使用

把多张小背景图整合到一张大图片中，大图片也称为sprites 精灵图或者雪碧图

移动背景图片位置，使用background-position

左移或上移均为负值

2.字体图标

下载网站：icomoon字库   或阿里icon font字库

把下载包里面的fonts文件夹放入HTML页面根目录下

先在style中引入字体文件，再给标签定义字体

 3.CSS三角

 实现效果：

 

 4.用户界面样式

4.1鼠标样式cursor

 4.2轮廓线outline

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

    input {outline: none; }

4.3 防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的。

textarea{ resize: none;}

5. vertical-align 属性应用

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

官方解释： 用于设置一个元素的 垂直对齐方式 ，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align : baseline （基线）   | top | middle | bottom(底线）

默认基线对齐，此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以

让文字和图片垂直居中对齐了。

6. 溢出的文字省略号显示

1. 单行文本溢出显示省略号--必须满足三个条件

/*1. 先强制一行内显示文本 */

white-space: nowrap; （ 默认 normal 自动换行）

/*2. 超出的部分隐藏 */

overflow: hidden;

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

text-overflow: ellipsis;

7. 常见布局技巧

巧妙利用一个技术更快更好的布局：

1.margin 负值的运用

1. 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框

2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index ）

2. 文字围绕浮动元素

3. 行内块的巧妙运用

  实现效果：

4.CSS 三角强化

 实现效果：