- CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
CSS Sprite值的是把多個icon圖片放在一張圖里面被去，通過background-position這個屬性調整背景圖片的位置來達到預期效果- 服務器上都每一個資源都需要加載训枢，圖片也是如此稚虎，如果有許多不同的icon捶箱，就需要有多次的http請求女责，如果合成一張圖片就可以減少http請求的次數澈灼，從而提高加載速度
- 而且多張合成一張圖片的大小小于這些圖片的總和樱衷，所以也就減少了http請求的加載時間
- img標簽和CSS背景使用圖片在使用場景上有何區(qū)別
- 是否使用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
圖片會覆蓋整個背景區(qū)域,不會留下空白 -
contain
圖片被包裹在背景區(qū)域里，有可能會留下空白
cover和contain - <length>
為圖片強制指定寬度和長度会放，若只有一個值則另一個值為auto - <percentage>
相對于背景區(qū)域寬度和高度的百分比饲齐，若只有一個值則另一個為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都能設置透明，有什么區(qū)別-
opacity是對元素設置透明度摄狱，可以對任何元素設置 -
rgba是通過顏色alpha通道來設置顏色的透明脓诡，只能針對顏色，例如背景顏色媒役，字體顏色祝谚，邊框顏色等顏色屬性
-
