- CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
CSS Sprite值的是把多个icon图片放在一张图里面，通过background-position这个属性调整背景图片的位置来达到预期效果- 服务器上都每一个资源都需要加载，图片也是如此，如果有许多不同的icon，就需要有多次的http请求，如果合成一张图片就可以减少http请求的次数，从而提高加载速度
- 而且多张合成一张图片的大小小于这些图片的总和，所以也就减少了http请求的加载时间
- img标签和CSS背景使用图片在使用场景上有何区别
- 是否使用img标签取决于图片是否是内容的一部分，例如网站的logo就是内容的一部分就需要使用image标签
- 还有img常用于需要经常更换的内容，而CSS的背景图片作为背景是不需要经常变动的
CSS Sprite
-
title和alt属性分别有什么作用-
title是一个全局属性，主要是为元素增加一个小提示或者注释，当鼠标hover到这个有title属性的元素时，title的值会在鼠标的旁边显示出来
title -
alt主要是当图片无法加载的时候用来替代图片的文字内容
alt
-
-
background: url(abc.png) 0 0 no-repeat;这句话是什么意思
这句话是一个background属性的shorthand，其中的值是background-image、bakground-position、background-repeat三个属性的简写-
background-image可以为背景引入背景图片，接受的值是一个相对URL地址或绝对URL地址 -
background-position可以指定背景图片的初始位置，其中0 0表示的是左上角 -
background-repeat表示的是背景图片是否重复，默认的值是repeat
-
div {
width: 1000px;
height: 1000px;
background-image: url(mia.jpg);
}
img
-
background-size有什么作用? 兼容性如何? 常用的值是?-
background-size的作用是指定背景图片的大小 -
background-size是CSS3的属性，在IE6、7、8不支持
background-size兼容性 - <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
- cover
图片会覆盖整个背景区域,不会留下空白 -
contain
图片被包裹在背景区域里，有可能会留下空白
cover和contain - <length>
为图片强制指定宽度和长度，若只有一个值则另一个值为auto - <percentage>
相对于背景区域宽度和高度的百分比，若只有一个值则另一个为auto
- cover
-
- 如何让一个div水平居中？如何让图片水平居中
- div居中
- 如果div是固定宽度，可以直接设置
margin: 0 auto; - 如果div是不定宽度
- 可以对div设置
display: inline-block;，然后对父元素设置text-align: center; - 或者div设置
display: table;，然后设置margin: 0 auto;
- 可以对div设置
- 如果div是固定宽度，可以直接设置
- 图片水平居中
直接text-align: center;
- div居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 1px solid;
}
.box1 {
width: 400px;
margin: 20px auto;
}
.box2 {
display: table;
margin: 20px auto;
}
.box3 {
text-align: center;
}
</style>
</head>
<body>
<div class="box1">我是固定宽度的div</div>
<div class="box2">我是用display: table;设置的，我的宽度是内容宽度</div>
<div class="box3">
<img src="mia.jpg" alt="">
</div>
</body>
</html>
居中
- 如何设置元素透明? 兼容性？
通过opacity: 0;不透明度这个属性来设置，它的属性值1表示完全不同，0表示完全透明，这个属性在IE8及以下只有部分支持
opacity兼容性 -
opacity和rgba都能设置透明，有什么区别-
opacity是对元素设置透明度，可以对任何元素设置 -
rgba是通过颜色alpha通道来设置颜色的透明，只能针对颜色，例如背景颜色，字体颜色，边框颜色等颜色属性
-
