CSS常见技巧
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
CSS雪碧图是指将网站上的图标合成在一张图片上，用background-position的方式加以应用，以减少页面请求的数量，使页面加载更快速。
2.img标签和CSS背景使用图片在使用场景上有何区别？
CSS背景图常用于页面上不变的内容，而当页面上的图片内容需要经常变动或者有链接功能时使用img标签。
3.title和 alt属性分别有什么作用？
alt是当内容无法加载时显示的替代文本，title是当鼠标移动到超链接上时的说明文本。
Paste_Image.png
4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思？
设置背景图片地址为abc.png，x轴方向偏移0，y轴方向偏移为0，不重复。
5.background-size有什么作用? 兼容性如何? 常用的值是?
-
background-size具有调整背景图片大小的功能。 -
background-size的兼容性如下图：
Paste_Image.png
常用值：（举例中图片原本大小为595px449px）*
-
background-size:300px 100px，使背景图片长宽分别为300px和100px。
<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:300px 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
- ```background-size:30% 50%```，使图片长宽分别为父元素长宽的30%和50%。
- ```
<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:30% 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
Paste_Image.png
-
background-size:contain，缩放图片以完全装入父元素，父元素可能出现留白。
<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:contain;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
- ```background-size:cover```，缩放背景图片以完全覆盖父元素，图片可能部分看不到。
- ```
<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:cover;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
Paste_Image.png
6.如何让一个div水平居中？如何让图片水平居中
i.
- 若想使
div水平居中，须给div一定宽度，margin左右设为auto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div水平居中</title>
<style type="text/css">
.div1 {
width:600px;
height:400px;
border:1px solid #000;
background-color:#ccc;
margin:0 auto ;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
- 给该```div```配置属性```display:inline-block;```并为其父元素添加样式```text-align:center```，亦可使```div```水平居中:
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div水平居中</title>
<style type="text/css">
body {
text-align:center;
}
.div1 {
width:600px;
height:400px;
border:1px solid #000;
background-color:#f00;
display:inline-block;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
Paste_Image.png
ii.
- 对于img元素，因为其属于行内元素，故可在其父元素上添加text-align:center样式即可实现水平居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
body {
text-align:center;
}
</style>
</head>
<body>
<img src="image/cat.jpg">
</body>
</html>
- 也可以将```img```元素添加```display:block; margin:0 auto; ```样式，同样可以达到效果:
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
img {
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<img src="image/cat2.jpg">
</body>
</html>
Paste_Image.png
- 如果将图片设置为背景图片，也可通过
background-position:center的方式将图片设置成水品居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
.div1 {
background:url(image/cat2.jpg) 0 0 no-repeat;
background-position:center top; /top意指图片在垂直方向上向上对齐，亦可取center或bottom/
width:100%;
height:700px;
border:1px solid #000;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
###7.如何设置元素透明？兼容性？
可用```opacity```属性设定元素的透明度，```opacity```取值为1（完全不透明）到0（完全透明）之间。
兼容性见下图：
###8.```opacity```和 ```rgba```都能设置透明，有什么区别
当```opacity```属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，其子元素都会产生透明效果。
而```rgba```只是颜色的一个参数，并不会对其子元素产生影响。
举例：
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务8</title>
<style>
.div1 {
background-color:rgb(255,0,0);
opacity:0.5;
height:100px;
width:200px;
}
.div2 {
background-color:rgba(255,0,0,0.5);
height:100px;
width:200px;
}
</style>
</head>
<body>
<div class="div1">
<h1>opacity</h1>
</div>
<div class="div2">
<h1>rgba</h1>
</div>
</body>
</html>
效果：
Paste_Image.png
本教程版权归本人及饥人谷所有，转载请注明来源。
