css常见技巧
一，CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
答：把小图标和背景图合并到一张图，通过background-position定位图片使用，减少网络请求，降低服务器压力，提高页面加载速度。
二，img标签和CSS背景使用图片在使用场景上有何区别
答：img多用在可变化，可点击的图片上，如果图像是内容的一部分，用img，有时候常用在按钮或者超链接上。
css背景图用于不需要点击，以及变换次数较少的标签，如icon等等
三，title和 alt属性分别有什么作用
答：
- alt 此属性的实质作用是图片在无法正确显示的时候起到文本替代的作用,如果想在鼠标滑过时显示提示,应该用title属性。alt只能运用于area input和img标签
- title 鼠标滑过时显示的文字提示，当然不必要所有的img标签都加此属性，比较重要或者说用户会体验到的图片内容建议一定要加此属性。 title为全局属性，可以应用到任何的元素上
示例
<img src="xxx.png" alt="我是图片" title="逗你玩" />
效果
图片无法显示时，alt="我是图片",
不管图片是否显示，都会出现title="逗你玩"
四，background: url(abc.png) 0 0 no-repeat;这句话是什么意思
答：是以下的缩写
-
background-image:url()添加要使用的背景图片地址 -
background-position:规定背景图像的位置,纵向和横向的偏移量 -
background-repeat:规定如何重复背景图像
background: url(abc.png) 0 0 no-repeat;
所以，这句话的意思是background-image:url(abc.png)背景图片的路径是当前目录下的abc.png文件，background-position 背景图片的位置是0px 0px 背景图像偏移为0，也就是在页面的左上角部分
background-repeat:背景图片不重复。
五，background-size有什么作用? 兼容性如何? 常用的值是?
答：background-size:用来设置背景图片的尺寸
常用值：
- auto 默认值；
- px 设置大小，例如：200px 300px (宽 高)，如果只设置一个值，则第二个值会被设置为 “auto”；
- 百分比。例如： 50% 50%（父元素的宽 高 比），如果只设置一个值，则第二个值会被设置为 “auto”；
- cover 背景图无限扩大使其填满背景区域，背景图某些部分可能不显示；
- contain 使背景图完全展示在背景区域，背景区域会有空白。
兼容性
六，如何让一个div水平居中？如何让图片水平居中
答：
div水平居中： margin:0 auto;
图片水平居中：
- 图片外增加一个父容器，在父容器中通过
text-align:center居中;
- 通过
display:block;margin:0 auto实现水平居中。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.t1{
text-align: center;
}
.t3 {
display: block;
margin:0 auto;
}
</style>
</head>
<body>
<div class="t1">
<img src="11.jpg" alt="dog">
</div>
<img class="t3" src="11.jpg" alt="dog">
</body>
</html>````
##### 七，如何设置元素透明? 兼容性？
答：使用 opacity：（0-1）来设定，其值越靠近0越透明。
IE8以下的浏览器不兼容。可用以下方法补充：`filter:alpha(opacity=0~100);`来设定，其值越靠近0越透明。
opacity: 0~1; /IE8部分支持,9以及以上都支持/
filter: alpha(opacity=40); /适用于IE 8 以及更早版本/
>示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.t1 {
background-color:red;
opacity: 0.5;
filter: alpha(opacity=50);
}
.t2 {
background-color:red;
opacity: 0.2;
filter: alpha(opacity=20);
}
.t3 {
background-color:red;
opacity: 0.8;
filter: alpha(opacity=80);
}
</style>
</head>
<body>
<div class="t1">
<h3>我是半透明的</h3>
</div>
<div class="t2">
<h3>我是透明的</h3>
</div>
<div class="t3">
<h3>我是不透明的</h3>
</div>
</body>
</html>
##### 八，`opacity` 和 `rgba`都能设置透明，有什么区别
答：
1. RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是**不透明度**，即，如果一个元素的alpha通道数值为0%（或0），那该元素就是**完全透明**的（也就是看不见的，但是可以透过该元素看到该元素下的元素），数值为100%（或255）时则意味着该元素完全**不透明**。
- opacity属性是css3的属性，也可以实现透明效果.`opacity:0~1` 1为完全不透明，0为完全透明 .
**区别：**
opacity作用于元素，以及元素内的所有子元素的透明度，子元素会继承；
rgba()只作用于元素的颜色或其背景色，相应子元素则不会继承。
> 示例
`.rgba{
background: rgba(255,0,0,0.5);
}
.opacity{
background: red;
opacity: 0.5;
}`
` <div class="rgba">
我是RGBA，只管我自己
</div>
<div class="opacity">
我是opacity，还管我里面的元素
</div>`
