CSS-高级技术导读

1.精灵图

1.1使用精灵技术的目的

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

1.2精灵图（sprites）的使用

使用精灵图核心：

1.精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中

2.这个大图片也称为sprites精灵图或者雪碧图

3.移动背景图片位置，此时可以使用background-position

4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同

5.因为一般般情况下都是往上往左移动，所以数值都是负值

6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

2.字体图标

2.1字体图标的产生

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

2.2字体图标的优点

*轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

*灵活性：本质其实是文字，可是很随意的改变颜色、产生阴影、透明效果、旋转等

*兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵图，只是对工作中图标部分技术的提升和优化

3.CSS用户界面样式

3.1鼠标样式cursor

li{cursor:pointer;}

3.2轮廓线outline

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

input{ouline:none;}

3.3防止拖拽文本域resize

textarea{resize:none;}

4.vertical-align属性应用  

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

4.1图片、表单和文字对齐

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

此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了

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

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

主要解决方法有两种：

1.给图片添加vertical-align:middle|top|bottom等

2.把图片转换为块级元素display:block;

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

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

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

6.常见布局技巧

1.margin负值运用

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

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

2.文字围绕浮动元素巧妙运用

3.行内块的巧妙运用

4.CSS三角巧妙运用