2016.10.9 CSS常见技巧

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

将一些零碎的图片整合到一起,这样在加载网页时候可以省去多次请求的时间.一般用于页面上的多个icon图标的整合,使用恰当的background-position进行定位.

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

<img>写在html的文件中,用于展示图片或者承接链接,为可替换元素.
css背景使用图片是一种背景展现的方式,用于页面上图标的展示.

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

background

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

background-size 属性规定背景图像的尺寸.

background-size

常用值

value	释义
<length>	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
<percentage>	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
<auto>	以背景图片原始大小缩放背景
<cover>	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
<contain>	将背景图片放大至完全填充背景区域.

5.如何让一个div水平居中？如何让图片水平居中?

margin:0px auto让一个div水平居中.多数用于使整个内容区居中与页面.
运用此方法时,一定要先定义div的宽度.
图片居中也可以使用这个方法.

6.如何设置元素透明? 兼容性？

通过rgba和opacity
opacity兼容性

Paste_Image.png

rgba兼容性

Paste_Image.png

opacity 设置透明度会使子元素也透明,有继承性,作用于元素，以及元素内的所有内容的透明度.
rgba 设置透明度没有继承性 只作用于元素的颜色或其背景色