CSS常见技巧
2016-07-16 本文已影响109人
进击的阿群
1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用？
- CSS Sprite是一种图片处理方法，就是将众多零散图片拼接成一张大图片，然后应用到背景图片当中。因为每张图片URL都会向服务器发送请求，拖慢网速，影响网站性能，而CSS雪碧图只需要请求一次大图片，性能得到优化。
- URL添加合成图片，然后利用background-position对背景图片定位，再进行样式设置即可。
- 单张图片不高于200KB。
eg:
**1. **现在有两张图片单独的图片：
购物袋素材
**2. **通过使用在线工具，将两张图片，拼接为一张大图：
sprite.png
**3. **如图中的sprite.png就是需要的雪碧图，粘贴图片地址：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task9-2</title>
</head>
<style type="text/css" media="screen">
div {
border: 1px solid;
}
.container1,.container2 {
background-image: url(http://ww2.sinaimg.cn/large/0060lm7Tgw1f5ux7yqolhj30e8074aa5.jpg);
width: 256px; /* 上面的地址就是雪碧图 */
height: 256px;
display: inline-block;
}
.container2 {
background-position: 256px 256px;
}
</style>
<body>
<div class="contain">
<div class="container1">
</div>
<div class="container2">
</div>
</div>
</body>
</html>
通过运用background-image和background-position将图片作为背景放置相应的位置。效果如图：
雪碧图效果图
另外，取值情况如下：
取负值
总结：雪碧图对于网站性能优化的作用非常大，所以即使简单也要熟练掌握，本例只是一个简单的例子，具体的还需要进一步学习。
2. img标签和CSS背景使用图片在使用场景上有何区别?
-
img标签因为显示的图片不会一尘不变，而且多半具有链接功能，所以对于一个网站上的链接或需要经常更新维护的图片，我们用img标签。 - 背景图片则多用于不经常做改动的图片。
eg:
京东素材
如图所示，京东的LOGO和购物车图片一般是不会做改动的，所以这里采用背景图片，而中间的“717吃货节”轮播，以及旁边的海报广告由于经常做变动，对应的是不同的链接，所以要用img。
3. title和 alt属性分别有什么作用？
- title既是属性又是标签。单就title属性来说，适用范围较广，几乎所有标签都可以适用title属性，title属性为标签添加建设性信息。
- alt 属性是
img标签一个必需的属性，它规定在图像无法显示时的替代文本。
所以，二者的区别主要在于功能上的差别，在表现上的差别则在img标签中体现，如图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task9-2</title>
</head>
<body>
</body>
</html>
title显示效果
alt效果图
如图所见，当我将地址写错的时候，图片无法显示，此时就会显示alt属性信息。而有些阅读器或者老浏览器都会有不显示图片的情况，所以有alt信息能让人们更好地理解文档。
4. background: url(abc.png) 0 0 no-repeat;这句话是什么意思？
“url()”是背景图片的url地址，可以是绝对url，也可是相对url。
“0 0”是背景图片相对位置，第一个是x坐标，第二个是y坐标，“0 0”代表最左上角。
“no-repeat”是设置背景图片不重复。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task9-2</title>
<style type="text/css" media="screen">
.div1 {
width: 200px;
height: 200px;
background: url(http://i1.piimg.com/567571/bb72ef0e8aa104d7.jpg) 0 0 no-repeat;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
效果图：
background
5. background-size有什么作用? 兼容性如何? 常用的值是?
- 作用：background-size设置背景图像的大小尺寸。
- 兼容性：
background-size兼容性
| 值 | 描述 |
|---|---|
| length | 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| % | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task9-2</title>
<style type="text/css" media="screen">
.div1 {
width: 200px;
height: 200px;
background-image: url(http://i1.piimg.com/567571/bb72ef0e8aa104d7.jpg);
border: 1px solid red;
background-size: 150px 150px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
当background-size: 150px 150px;时：
length
当background-size: 50%;时：
50%
当background-size: 80% 80%;时：
80% 80%
当background-size: cover;时：
cover
当background-size: contain;时：
contain
可以看出，cover属性是将扩大图片完全覆盖块区，哪边短哪边就先覆盖，然后按原图比例扩大；contain则是在原图完全包含在区块中的情况下，扩大到整个块区。
6. 如何让一个div水平居中？如何让图片水平居中？
div是块级元素，所以需要用margin: 0 auto;让div水平居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task9-2</title>
<style type="text/css" media="screen">
.div1 {
width: 200px;
height: 150px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
效果图：
margin: 0 auto
可以看见图片默认情况下并不是水平居中的，由于img是行内元素，所以可以在其父元素样式里添加text-align: center使其水平居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task9-2</title>
<style type="text/css" media="screen">
.div1 {
width: 200px;
height: 150px;
margin: 0 auto;
border: 1px solid red;
text-align: center; /* 在div里添加行内元素水平居中 */
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
效果图：
text-align: center
7. 如何设置元素透明? 兼容性？
opacity属性能够设置元素的不透明度，取值为0~1，0完全透明，1完全不透明。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task9-2</title>
<style type="text/css" media="screen">
.div1 {
width: 200px;
height: 150px;
margin: 0 auto;
border: 1px solid red;
opacity: 0.3; /* 添加透明度 */
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
效果图：
opacity
可以看出，opacity不仅让img元素透明，而且连红色边框也会透明，也就是说所有元素的不透明度都可以进行设置。
兼容性：
opacity.png
8. 8.opacity和 rgba都能设置透明，有什么区别？
rgba()中的alpha通道也是对元素颜色进行不透明度设置，不过仅作用在元素颜色或背景色。
opacity作用于元素，以及元素内的所有内容的透明度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task9-2</title>
<style type="text/css" media="screen">
.div1 {
width: 200px;
height: 150px;
font-size: 4em;
border: 1px solid green;
opacity: 0.3;
background-color: silver;
}
.div2 {
width: 200px;
height: 150px;
font-size: 4em;
border: 1px solid green;
color: rgba(0, 0, 0, 0.3);
background-color: silver;
}
</style>
</head>
<body>
<div class="div1">
test
</div>
<br>
<div class="div2">
test
</div>
</body>
</html>
效果图：
不透明度效果图
可以看出，rgba()作用于div的color属性，color属性用于设置内容的颜色，所以只有test透明；而opacity作用于元素内所有内容，所以边框，背景，文字都设置了透明。
本文版权归作者和饥人谷所有，转载请注明来源
