css常见技巧

---

[阮一峰老师的css技巧]

css提示框

(http://www.ruanyifeng.com/blog/2010/03/css_cookbook.html)

Paste_Image.png

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

指的是一种背景图片的拼合技术。使用css雪碧图，因为如果页面图标繁多，每显示一张图片都会向服务器发送请求，请求次数越多，造成延迟的可能性也就越大。当做成雪碧图以后能够减少页面的请求数、降低图片占用的字节，以达到提升页面访问速度的目的。 做好图以后用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。（就像用望远镜看东西一样，区别在于东西在动你望远镜不动。）

雪碧图用法

JS Bin代码

---

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

对于固定不变的网页内容，如图标等用背景图。对于可变的的内容图片是和内容相关的，用图片。

---

3.title 和 alt属性分别有什么作用

	作用
alt	由于某些原因无法查看图像时提供了备选的信息
title	当鼠标移到元素上时显示一段工具提示文本

w3school参考

---

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

背景图片为abc.png，向右先下分别偏移0px，表示x，y方向都不偏移，图片不重复（平铺）。

---

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

可以设置背景图片的大小。

兼容性

**contain **:容器能把图片全都包裹进来。
**cover **:图片能把整个容器大小覆盖到，有可能图片部分不能显示。
length:设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

---

6.如何让一个div水平居中？如何让图片水平居中
div水平居中:因为div是个块状元素，所以可以用margin 0 auto ；
图片水平居中：再其父元素上加上text-align：center；

示例

jsbin 代码

---

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

rgba：rgba(red, green, blue, alpha)
alpha 数值是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
opacity：0~1
opacity属性也可以设置一个元素的透明度。

rgba兼容性

opacity兼容性

---

8.opacity和 rgba都能设置透明，有什么区别

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性

opacity和 rgba的区别

代码题
使用CSS Sprite 把如下6张图标图片合并成一张图片，做出如下效果, 当 hover 时背景变色

使用字体图标(如 iconfont, 查找->加入购物车->下载 demo 、 fortawesome 或者 fontello)实现上例效果
使用css border实现如下三角形[

代码题答案

代码题1
代码题2
代码题3

---

             本文版权归作者饥人谷_Josh和饥人谷所有，转载请注明来源