CSS高级技巧

一.精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）

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

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

使用

使用精灵图核心：

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

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

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

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

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

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

使用精灵图核心总结：

1. 精灵图主要针对于小的背景图片使用

2. 主要借助于背景位置来实现---background-position

3. 一般情况下精灵图都是负值（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴往下走是正值，往上走是负值）

二倍精灵图做法

· 把精灵图等比例缩放为原来的一半

· 之后根据大小测量坐标

· 注意代码里面background-size也要写：精灵图原来宽度的一半

二.CSS三角

网页中常见一些三角形，使用CSS 直接画出来就可以，不必做成图片或者字体图标。

①一张图，你就知道CSS三角是怎么来的了, 做法如下：

<注：line-height: 0;font-size: 0;两句是为了照顾兼容性> 

 ②利用rotate来做

 三.CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

· 更改用户的鼠标样式

· 表单轮廓

· 防止表单域拖拽

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

轮廓线outline

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

防止拖拽文本域resize

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

四.vertical-align 属性应用

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

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

 

图片、表单和文字对齐

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

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

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

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

主要解决方法有两种：

1.给图片添加vertical-align:middle | top| bottom等。（提倡使用的）

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

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

单行文本溢出显示省略号

必须满足三个条件

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient:vertical;

六.常见布局技巧

margin负值运用

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

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

文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

行内块巧妙运用

页码在页面中间显示:

1.把这些链接盒子转换为行内块，之后给父级指定text-align:center;

2.利用行内块元素中间有缝隙，并且给父级添加text-align:center;行内块元素会水平会居中