CSS常见技巧

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

雪碧图是将若干的小图片、小图标整合至一张大图中。
实现方法：通过设定一个固定大小的盒子（display:block,display:block-inline```）当做窗口，再由background-positon定位大图来展现我们所需要小图片。
好处：

• 能够将获取图片的请求大量的减少，从而提高网页加载速度；
• 简单的UI变换时，只需更改background-position，无需重新更换图片。

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

• CSS背景图不存在于DOM结构中，仅仅是一种以图片显式形式的样式，用户不可操作，它将在HTML加载完成后加载，加载失败后不会出现；
• img标签存在于DOM结构中，可以实现链接、放大等等功能，用户进行可以操作，它随HTML一同加载，加载失败后以标签形式呈现；
• 若无需频繁更改图片，推荐使用CSS背景图；反之，则为img标签。

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

• title属性：全局属性，能运用于任何标签，是以提示形式添加的描述性文字，无论标签加载成功与否都能正常显示；
• alt属性：alt属性只能用在img、area和input元素中，是上述标签元素加载失败后呈现在标签上的文字描述。

4、background: url(abc.png) 0 0 no-repeat;什么意思？

• background: url(abc.png)：加载当前目录下的abc.png作为背景图；
• ```0 0``：背景图的左上角起始点与父级元素的左上角的起始点左偏差为0，上偏差为0。即，两者重合；
• no-repeat背景图只出现一次，不重复。

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

作用：规定背景图的尺寸
兼容性：IE9及其以上兼容。

常用的值：

前面两个值很好理解，cover的意思是让当前盒子中不留一丝缝隙；而contain是让盒子中至少一对边不留缝隙。

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

• div水平居中：
  1、定宽 ：margin-left:auto;margin-right:auto;
  2、非定宽：将div设置为display:inline-block,在设置父元素text-align:center
• 图片水平居中：
  图片img是内链元素，直接在父级元素中设置text-align:center即可。

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

• opacity: (0(完全透明)~1（不透明）);/IE8部分支持,9以及以上都支持/
• filter: alpha(opacity=(0~100));/适用于IE 8 以及更早版本/

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

• opacity作用于元素以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。
• opacity会继承父元素的 opacity 属性，而rgba()设置的元素的后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。