css常见技巧
2016-07-23 本文已影响29人
ahong_吴
一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
雪碧图是：把一些小图片、小图标合成在一张图上，然后通过background-position控制窗口偏移来显示每个图片、图标。
- 利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。
- 提高了网页的制作效率。只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
- 维护起来更加方便。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>雪碧图</title>
<style>
div{
width: 200px;
height: 200px;
background:url(http://imgsrc.baidu.com/forum/w%3D580/sign=2960b6a27e094b36db921be593cd7c00/9d3cd42a2834349b1bf626f8c1ea15ce37d3bee8.jpg) no-repeat;
border:1px solid;
}
.a1{
}
.a2{
background-position: 0px -215px;
}
.a3{
background-position: 0px -420px;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</body>
</html>
Paste_Image.png
- 另外，图片转base64编码放在url里面，也是减少网页的http请求的一种方法。
二、img标签和CSS背景使用图片在使用场景上有何区别
-
<img>是HTML标签，css背景background-image是css属性。 - 如果一张图片是网页内容的一部分，就该用
<img>，否则就建议用 CSS 背景图。 - 网站logo使用
<img>利于seo优化。
三、title 和 alt属性分别有什么作用
- title：
图片正常显示的说明文字
链接上的说明文字 - alt：
是图片无法显示时的说明文字
Paste_Image.png
四、background: url(abc.png) 0 0 no-repeat;这句话是什么意思
- ccs里面添加一个图片背景，偏移为o，图片不重复。
background: url(abc.png)adc.png图片做css背景图片。
0 0代表background-position的值，表示背景图的定位，分别是水平垂直偏移。
no-repeat图片不重复。
扩展：
url为background-image的值，表示背景图片的URL。
no-repeat为background-repeat的值，可使用的值有repeat、no-repeat、repeat-x、repeat-y、inherit。分别表示水平垂直重复、不重复、仅水平重复、仅垂直重复、继承自父辈元素。
五、background-size有什么作用? 兼容性如何? 常用的值是?
background-size作用是控制图片的大小。
Paste_Image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.img{
display: inline-block;
width:300px;
height: 300px;
border: 1px solid #ccc;
background:url(http://ent.southcn.com/8/images/attachement/jpg/site4/20160713/80/5594612692356320684.jpg) 0 0 no-repeat;
}
.p1{
background-size: 150px;
}
.p2{
background-size: 50%;
}
.p3{
background-size: cover;
}
.p4{
background-size:contain;
}
</style>
</head>
<body>
<div class="img p1"></div>
<div class="img p2"></div>
<div class="img p3"></div>
<div class="img p4"></div>
</body>
</html>
Paste_Image.png
浏览器兼容：
Paste_Image.png
六、如何让一个div水平居中？如何让图片水平居中
让 div（块级元素）水平居中：margin: 0 auto;
让 img（行内元素）水平居中:text-align:center;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.wrap{
width: 500px;
height: 500px;
border: 1px solid;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrap">
</div>
</body>
</htnl>
Paste_Image.png
七、如何设置元素透明? 兼容性？
opacity：0~1,规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明），是css3属性。
Paste_Image.png
八、opacity 和 rgba都能设置透明，有什么区别
opacity透明作用于元素内的所有内容，rgba透明只能用于颜色或背景色。
