CSS高级技巧

1、精灵图

为了有效减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（CSS Sprites、CSS雪碧）。精灵技术主要针对于背景图片使用

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

精灵图主要针对小的背景图片使用，主要借助于背景位置实现-background-position。一般情况下精灵图都是负值（X轴右边走是正值，左边走是负值，Y轴同理）

2、字体图标 iconfont

使用于小图标，字体图标展示的是图标本质属于字体

精灵图缺点：图片文件比较大，图片本身放大和缩小会失真，一旦图片制作完毕想要更换非常复杂

字体图标优点

1、字体图标下载

推荐网站：

2、字体图标引入

下载完毕之后，注意原先的文件不要删后面会用

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

2、在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面，一定注意字体文件路径

字体声明

3、html标签内添加小图标

3、字体图标追加

字体图标不够用了需要添加新的字体图标到原来的字体文件中。

3、CSS三角

为了照顾兼容性会加上中间两行代码

4、CSS用户界面样式

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

1、鼠标样式cursor

li {cursor: pointer;}

2、轮廓线outline

取消表单轮廓

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

 input  {outline： none；}

防止拖拽文本域 resize

默认右下角是可以拖拽的

textarea{ resize： none；}

5、vertical-align 属性应用

经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

图片表单都属于行内块元素，默认的vertical-align是基线对齐

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

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

解决方案·：1、给图片添加vertical-align：middle/top/bottom等

2、把图片转换为块级元素 display：block；

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

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

2、多行文本溢出显示省略号

7、常见布局技巧

1、margin负值运用

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

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

2、文字围绕浮动元素

给左边图片加上左浮动

3、行内块巧妙运用

给父盒子添加text-align：center；，里面的行内元素行内块元素都会水平居中

4、CSS三角强化

贯穿删除线：text-decoration： line-through；

8、CSS初始化

为了照顾浏览器的兼容需要对CSS初始化,就是重设浏览器样式

把中文的名称用相应的Unicode编码来代替，避免出现乱码。比如黑体\9ED1\4F53,宋体\5B8B\4F53，微软雅黑\5FAE\8F6F\96C5\9ED1