CSS常见技巧

1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用

Sprite可以把多个图片集中放在一个大图中，以减少网页的网络请求次数，来提高网页加载的速度，比如一些小的icon都放在一张大图之中，显示的时候由background-position来设置位置显示。

2、img标签和CSS背景使用图片在使用场景上有何区别

img标签的图片里面有src可以实时和数据库交换数据，对每个人看到的显示的图片可以都是不一样的，而CSS里面写background-img的话是写死的图片，每个人看到的都会是一样的，不适合用于网页经常需要变更内容的图片区域。

3、title和alt属性分别有什么作用

img中的title是鼠标放上去可以看到的文字的说明

img中的alt是当图片无法加载无法显示的时候来替代图片来显示的。

而且搜索引擎想知道你的图片是什么图片就是靠alt里面的文字内容来识别的。

4、background: url(abc.png) 0 0 no-repeat;这句话是什么意思

背景图片引用abc.png 

0 0是指背景图片的放置位置，是一个坐标轴的概念。

no-repeat是指背景图片引入进来后不要以重复的形式铺满一个地方，直接一个图片就好了，铺不满就不满。

5、background-size有什么作用? 兼容性如何? 常用的值是?

background-size是规定图片尺寸用的一个属性

background-size

background-size常用的值就是length、percentage、cover、contain。

length 设置背景图像的高度和宽度。如果只设置一个值，则第二个值会被设置为 "auto"。

percentage 以父元素的百分比来设置背景图像的宽度和高度。

关于cover&contain

6、如何让一个div水平居中？如何让图片水平居中

让div水平居中可以写代码margin: 0px auto;

做一个演示：

DIV和图片都是居中的写法

7、如何设置元素透明? 兼容性？

opacity兼容

直接设置opacity: 0;可以让元素透明，并且可以自定义设置透明度，并且元素的事件依旧是会被触发的。是一个比较常用的方法。

8、opacity和rgba都能设置透明，有什么区别

opactiy可以应用于图片和文字。

RBGA只能表示背景的不透明度。

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。