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()设置的元素的后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。
网友评论