css常见技巧

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

雪碧图是：把一些小图片、小图标合成在一张图上，然后通过background-position控制窗口偏移来显示每个图片、图标。

• 利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。
• 提高了网页的制作效率。只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
• 维护起来更加方便。

Paste_Image.png

• 另外，图片转base64编码放在url里面，也是减少网页的http请求的一种方法。

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

• 是HTML标签，css背景background-image是css属性。
• 如果一张图片是网页内容的一部分，就该用，否则就建议用 CSS 背景图。
• 网站logo使用利于seo优化。

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

• title：
  图片正常显示的说明文字
  链接上的说明文字
• alt：
  是图片无法显示时的说明文字

Paste_Image.png

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

• ccs里面添加一个图片背景，偏移为o，图片不重复。
  background: url(abc.png)adc.png图片做css背景图片。
  0 0代表background-position的值，表示背景图的定位，分别是水平垂直偏移。
  no-repeat图片不重复。

扩展：
url为background-image的值，表示背景图片的URL。
no-repeat为background-repeat的值，可使用的值有repeat、no-repeat、repeat-x、repeat-y、inherit。分别表示水平垂直重复、不重复、仅水平重复、仅垂直重复、继承自父辈元素。

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

background-size作用是控制图片的大小。

Paste_Image.png

Paste_Image.png

浏览器兼容：

Paste_Image.png

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

让 div（块级元素）水平居中：margin: 0 auto;
让 img（行内元素）水平居中:text-align:center;

  
  



  ![范特西](http://upload-images.jianshu.io/upload_images/2397444-7d73ca82efad0659.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Paste_Image.png

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

opacity：0~1,规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明），是css3属性。

Paste_Image.png

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

opacity透明作用于元素内的所有内容，rgba透明只能用于颜色或背景色。