CSS基础

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

css sprite（雪碧图），图片合并在线工具可以合成图片。把很小的图片合成一张大图。主要是一个小图片就发一个网络请求，图片过多，浪费网络资源，网页卡，通过合并一张图片，再通过background-position进行设置，减少网络请求，使得页面加载更快。

为了减少页面加载次数，也可以把图片转base 64,直接把图片变成数据，直接放在css中background:url(里面)没有网络请求，只不过CSS会变大，只适用于非常非常小的图标

---

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

1、img标签是html标签，css的背景图片是样式。

2、css背景图片是多用于网页上不变的内容，比如购物车这种小icon,一般用背景图片多；而背景图是可变内容的时候，或者需要点击的，用的是img。比如各大购物网站，买家的头像。

3、二者表述方式不一样background:url();而

---

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

title是标题，当鼠标悬浮在元素呢上面显示的，alt是在图片不能正常打开的时候，显示的提示信息

---

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

引用abc.png作为背景图片，并且背景图片不偏移，在父容器的左上角，且不重复

---

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

background-size:设置图片大小，使得图片和父容器完美展示。

常用值为：

1、length(数值)。background-size:30px 30px（图片的宽度和高度）

2、percentage（百分比）。background-size:100%(50%)可以用来设置背景图片缩放与否。

3、background-size:cover（图片可以整个容器覆盖到）

4、background-size:contain(不管容器设置多大，图片多大，可以把图片包括进去，不会随着容器变大而变大)

---

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

行内元素和图片：水平居中，用text-align:center

块级元素：水平居中margin:0 auto;或者用margin-left:auto;margin-right:auto;

---

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

背景色透明和整体透明，如果让div透明，是里面包含所有东西会透明。

新版本中img{opacity:0.5}，opacity取值0-1；IE8及更早版本语法为img{opacity:0.5;filter:alpha(opacity=0.5)}

更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明

---

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

opacity设置的透明，子元素会继承。rgba设置的透明，子元素不会继承

---