啊啊啊啊，要开始看论文了，感觉时间都不够用，好忧伤。
一.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用。
- CSS Sprite(雪碧图|精灵图)是指把多个icon合并成一张大图，从而减少你的网站的HTTP请求数量，极大的提高了页面的性能，防止造成页面卡顿。雪碧图使用CSS 的background-img、background-repeat和background-position等属性渲染,实现了精准的定位。图片是在CSS中定义，不是img标签。它适用于一些内容不变的小图片。
举个例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="Edge,chrome=1" />
<title>CSS sprites</title>
<style>
.icon{
width: 50px;
height: 50px;
background: url(http://static.360buyimg.com/devfe/toolbar/1.0.0/css/i/toolbars.png) 0 0 no-repeat;
border: 1px solid;
}
.s1{
}
.s2{
background-position: 0px -40px;
}
.s3{
background-position: 0px -91px;
}
.s4{
background-position: 0px -144px;
}
</style>
</head>
<body>
<div class="icon s1"></div>
<div class="icon s2"></div>
<div class="icon s3"></div>
<div class="icon s4"></div>
</body>
</html>
效果图
- 雪碧图在线合成工具
国外的雪碧图在线合成工具为CSS SPRITES GENERATOR
它的优点是可以设置属性，自动合成，但是不能批量操作。
图片在线合并 - 还有一种减少网络请求的方法是把图片转换成base64的字符串，直接把上面url里面的链接换成转化后的字符串就行。这适用于对网页实时性比较严格的时候，但是这样CSS会变得比较大，所以图片一定要非常小。
二.img标签和CSS背景使用图片在使用场景上有何区别？
- img标签是html结构当中的一部分；而background-img是CSS的一种样式，它在CSS当中定义。
- img适用于页面上内容会变化，图片是和内容相关的情况，比如说鼠标点击之后会跳转；而background-img适用于页面上固定不变的内容，所有的人看到的都一样的情况，比如说图标。
三.title和alt属性分别有什么作用？
- title属性
title是为该属性的元素提供建议性的信息，它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。当鼠标放置在选定元素时，大部分可视化浏览器会显示title的提示信息。
title属性用途之一就是为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的的时候。还有一个用处就是为图像提供额外的说明信息，比如日期等信息。 - alt属性
alt属性只能用在img、area和input元素中，它是为了给那些不能看到文档中图像（比如下载失败）的浏览者提供文字说明信息，在图片的位置显示内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>alt和title的区别</title>
<style>
img{
width: 400px;
height: 450px;
}
</style>
</head>
<body>
[站外图片上传中……(2)]
[站外图片上传中……(3)]
</body>
</html>
结果
title是鼠标放置在图片上显示的内容，alt是图片无法显示时的提示说明。
四.background: url(abc.png) 0 0 no-repeat;这句话是什么意思？
- 这里background的属性值含义依次为背景图片（括号里面是图片的地址）、坐标（X轴、Y轴）、是否要重复（当图片小到不满足填满整个容器时，会默认重复显示图片，直到填满容器为止。）。
- 关于定位这里要再说明几点：
- 这里的X轴，向右延伸是负值；Y轴向下延伸是负值。
- 如果坐标只写了一个值，默认就是X方向的；那么Y轴方向就是默认居中对齐（center）。
- XY方向也可以用“left、right、top、bottom、center”来实现定位。其中，center表示居中对齐，其他的表示背景图片相对于容器的左右上下方向对齐。
- XY坐标除了可以用数字表示，还可以用百分比表示。用百分比的算法是：
X：（容器的宽度-图片的宽度）乘以（X方向的百分数）
Y：（容器的高度-图片的高度）乘以（Y方向的百分数）
- 回到题目当中，它的意思把abc.png作为背景图，垂直和水平方向上的坐标为0px，0px，即位置不产生偏移，在父容器的左上方，并且图片不重复。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>背景图片</title>
<style>
.img-wrap{
width: 250px;
height: 250px;
border: 1px solid;
background: url(../img/dog.gif) 0 0 no-repeat;
</style>
</head>
<body>
<div class="img-wrap"></div>
</body>
</html>
效果图
五.background-size有什么作用? 兼容性如何? 常用的值是?
- background-size可以规定背景图片的尺寸大小。
在Can I use上查到的兼容性为：
background-size兼容性 - 常用的值有：
| 常用的值 | 含义 |
|---|---|
| length（数值） | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage（百分比） | 以父元素的百分比来设置背景图像的宽度和高度。第一个值用来设置宽度，第二个值用来设置高度。如果只设置一个值，那么第二个值会被设置为 "auto"。 |
| cover | 把背景图像扩大到足够大，以使背景图像完全覆盖背景区域。但图片可能显示不全。 |
| contain | 不管图片多大，容器都能够包裹图片，虽然容器可能会有空白。 |
| auto | 以背景图片的比例来缩放背景图片。 |
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>background-size</title>
<style>
.img{
width: 300px;
height: 350px;
border: 1px solid;
background: url(../img/girl.jpg) no-repeat;
display: inline-block;
}
.length{
background-size: 80px;
}
.percentage{
background-size: 50%;
}
.cover{
background-size: cover;
}
.contain{
background-size: contain;
}
</style>
</head>
<body>
<div class=" img length"></div>
<div class="img percentage"></div>
<div class="img cover"></div>
<div class="img contain"></div>
</body>
</html>
效果对比
- 多重背景
设置多重背景，可以设置用逗号分隔的多个值。举个例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>多重背景</title>
<style>
div{
width: 500px;
height: 550px;
border: 1px solid;
background: url(../img/dog.gif),url(../img/girl.jpg);
background-repeat: no-repeat, no-repeat;
background-position: 0 0, top;
background-size: 40%,contain;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
六.如何让一个div水平居中？如何让图片水平居中？
- div水平居中（块级元素水平居中）
div是块级元素，要使它水平居中，让它的margin-left等于margin-right就可以。 - 图片水平居中（行内元素水平居中）
图片是行内元素，要使它水平居中，让父容器的块级元素写为text-align: center，它的作用就是让里面的行内元素相对于自己的父容器居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>水平居中</title>
<style>
.box1{
border: 1px solid;
width: 500px;
height: 500px;
text-align: center;
display: table-cell;
vertical-align: middle; /* 使用表格元素，使它垂直方向也居中*/
}
.box2{
width: 50px;
height: 50px;
background: pink;
margin-left: auto;
margin-right: auto; /*也可以写成margin: 0 auto;*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
[站外图片上传中……(4)]
</div>
</body>
</html>
水平垂直居中
七.如何设置元素透明? 兼容性？
透明分为背景图透明和整体透明。比如说，如果让背景图片设置透明度，鼠标点击会变白；整体透明的话，比如说设置div透明，里面包含所有东西会透明。透明有两种方法设置。
- rgba：rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。 -
opacity：0~1
opacity属性也可以设置一个元素的透明度。
rgba兼容性
opacity兼容性
八.opacity和 rgba都能设置透明，有什么区别？
opacity属性设置透明，会使得这个元素内所有的内容都是透明的,因为opacity会继承父元素的 opacity 属性。而rgba设置的元素的后代元素不会继承不透明属性，只是针对自己本身有效，而无法使内部的所有元素透明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity与rgba</title>
<style>
div{
width: 500px;
height: 500px;
border: 1px solid #999;
text-align: center;
display: inline-block;
}
.opacity{
background: red;
opacity: 0.3;
}
.rgba{
background:rgba(255,0,0,0.3);
}
</style>
</head>
<body>
<div class="opacity">
<span>我是opacity设置的透明度。</span>
[站外图片上传中……(5)]
</div>
<div class="rgba">
<span>我是rgba设置的透明度。</span>
[站外图片上传中……(6)]
</div>
</body>
</html>
opacity与rgba对比
九.代码
-
使用CSS Sprite 把如下6张图标图片合并成一张图片，做出如下效果, 当 hover 时背景变色。
效果预览 使用字体图标(如 iconfont, 查找->加入购物车->下载 demo 、 fortawesome 或者fontello)实现上例效果。
效果预览
补充：上面的方法使用的还是图片的方法，这里再另外补充了一下字体图标的方法。
预览效果
Github-
使用css border实现如下三角形
效果预览
相关代码Github地址
使用border、border-radius等还可以设计出许多形状，有兴趣可以自己试试。
