伊人久二区三区,三级国产三级在线,97超碰人人人少妇

A、問答題

一、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用？

直白點(diǎn)解釋就是一種CSS圖片合成技術(shù)即指集合網(wǎng)頁中的小圖標(biāo)或背景圖像到一張圖片上，然后通過CSS背景定位進(jìn)行選取所需的部位，這個(gè)集成的圖片就是雪碧圖（或叫精靈圖）；其作用是可以1、減少加載圖片時(shí)對(duì)服務(wù)器請(qǐng)求次數(shù)；2、減少頁面的加載時(shí)間；3、減少鼠標(biāo)劃過的一些bug；
注：

CSS雪碧調(diào)用的圖默認(rèn)情況下不可被打印，除非在@media中特別添加 print聲明；
雪碧圖合成前的圖片和合成后的圖片不宜太大；

二、img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別？

img標(biāo)簽適合使用在圖片內(nèi)容可變的或者圖片有實(shí)際內(nèi)容的情況下（img里可設(shè)alt對(duì)圖片進(jìn)行描述）；而css背景圖適合使用在圖片內(nèi)容固定不變比如一些小的logo或icon等等（這種情況可以采用雪碧圖的方法）情況下；
注：如果一張較大的圖片放在img標(biāo)簽中，則待該圖片加載完后再加載后續(xù)的網(wǎng)頁內(nèi)容；若放在css背景圖中，則待網(wǎng)頁內(nèi)容及樣式全部加載完后再加載該圖片，其不影響瀏覽網(wǎng)頁全部內(nèi)容（如果此時(shí)圖片無法加載或加載失敗的時(shí)候，不會(huì)有圖片占用標(biāo)記，不會(huì)出現(xiàn)紅色叉）。

三、title 和 alt屬性分別有什么作用？

title的作用是給鏈接a標(biāo)簽、img標(biāo)簽或p標(biāo)簽等注明額外信息用，同時(shí)它也是abbr（縮寫）及acronym（首字母縮寫，HTML5不支持該標(biāo)簽可用abbr替代）標(biāo)簽必不可少的屬性。（當(dāng)然如果它被當(dāng)作標(biāo)簽來看待則表示頁面的標(biāo)題。）當(dāng)這些元素使用title時(shí)，鼠標(biāo)放在對(duì)應(yīng)的元素上面，會(huì)出現(xiàn)一個(gè)工具提示文本，如下圖：

title使得img出現(xiàn)工具提示文本.png

上述代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<a href="#" title="a鏈接出現(xiàn)的工具提示文本">這是一個(gè)a鏈接</a>
![img標(biāo)簽出現(xiàn)的工具提示文本](http://upload-images.jianshu.io/upload_images/2166980-99cbc7b826de66de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<p title="p標(biāo)簽出現(xiàn)的工具提示文本">這是段落</p>
<abbr title="超文本標(biāo)記語言"> HTML</abbr> 語言很有趣
</body>
</html>

而alt是專門給圖片進(jìn)行內(nèi)容描述用的（圖片上是什么東西，如上面的代碼中的alt="百度logo" ），這樣當(dāng)瀏覽器無法加載圖片時(shí)或者當(dāng)用戶使用屏幕閱讀器時(shí)，可以通過alt的值了解圖片里的內(nèi)容到底是什么。另:圖片使用alt時(shí)也利于網(wǎng)站的SEO，便于搜素引擎爬蟲識(shí)別；

四、background: url(abc.png) 0 0 no-repeat;這句話是什么意思？

這句話的意思是引用abc.png這樣圖片作為背景圖，這張圖片不偏移，不重復(fù)；

五、background-size有什么作用? 兼容性如何? 常用的值是?

作用是設(shè)置背景圖片的大小，兼容性如下圖：

background-size兼容性.png

常用的值有：數(shù)字（如果有兩組數(shù)字，則前者表示寬度后者表示高度，如果只有一組數(shù)字，則表示寬度，高度為auto）、百分?jǐn)?shù)（以父元素的百分比來設(shè)置---- 如果有兩組數(shù)值，則前者表示寬度后者表示高度，如果只有一組數(shù)值，則表示寬度，高度為auto）、contain（圖片擴(kuò)展至最大尺寸以使其寬度和高度正好適應(yīng)內(nèi)容區(qū)域即其正好被包含）、cover（把圖片擴(kuò)展至較大以使得圖片完全覆蓋內(nèi)容區(qū)域，這樣會(huì)導(dǎo)致圖片部分區(qū)域未顯示出來）
具體可看下面的例子代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
div.try-number{
    background: url(http://tva1.sinaimg.cn/crop.0.0.512.512.180/672f1d65jw8exjm9yc9qkj20e80e83zm.jpg) 0 0 no-repeat;
    height: 200px;
    width: 200px;
    color: #000;
    background-color: #f00;
    background-size: 100px 100px;

}
div.try-per{
    background: url(http://tva1.sinaimg.cn/crop.0.0.512.512.180/672f1d65jw8exjm9yc9qkj20e80e83zm.jpg) 0 0 no-repeat;
    height: 200px;
    width: 200px;
    color: #000;
    background-color: #0f0;
    background-size: 50% 100%;

}
div.try-contain{
    background: url(http://tva1.sinaimg.cn/crop.0.0.512.512.180/672f1d65jw8exjm9yc9qkj20e80e83zm.jpg) 0 0 no-repeat;
    height: 200px;
    width: 200px;
    color: #000;
    background-color: #0f0;
    background-size: contain;

}
div.try-cover{
    background: url(http://tva1.sinaimg.cn/crop.0.0.512.512.180/672f1d65jw8exjm9yc9qkj20e80e83zm.jpg) 0 0 no-repeat;
    height: 200px;
    width: 200px;
    color: #000;
    background-color: #0f0;
    background-size: cover;

}

    </style>
</head>
<body>
<div class="try-number">這是數(shù)字表示</div>
<div class="try-per">這是百分比表示的方法</div>
<div class="try-contain">這是contain的表示方法</div>
<div class="try-cover">這是cover的表示方法</div>
</body>
</html>

運(yùn)行結(jié)果可見：

background-size的用法.png

http://jsbin.com/gixuqe/edit?html,output

六、如何讓一個(gè)div水平居中？如何讓圖片水平居中？

可以使用margin:數(shù)字 auto 讓div水平居中；如下面代碼中的margin:10px auto;使得div水平居中了；
圖片水平居中可采用text-align:center; 如下面的代碼中的```text-align:center``使得圖片及div中的文本居中了。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定寬塊狀元素水平居中</title>
<style>
div{
    border:1px solid red;
    margin:10px auto;
    width: 500px;
    text-align: center;   
}

</style>
</head>

<body>
<div class="txtCenter">我是文本，我想要在父容器中水平居中顯示。</div>
<div class="imgCenter">![](http://upload-images.jianshu.io/upload_images/2166980-808545378db9088f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</div>
</body>
</html>

運(yùn)行結(jié)果見：
http://jsbin.com/hozugid/edit?html,output

七、如何設(shè)置元素透明? 兼容性？

可使用opacity屬性；
兼容性如下圖所示：

opacity兼容性.png

八、opacity 和 rgba都能設(shè)置透明，有什么區(qū)別？

區(qū)別是opacity不僅能夠作用所對(duì)應(yīng)的元素還作用在該元素內(nèi)所有相關(guān)的透明度，且opacity還會(huì)繼承父元素的opacity的屬性；而rgba則不存在繼承的情況，且其只針對(duì)元素的顏色或背景色有效；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .try-opacity{
        height: 300px;
        width: 300px;
        opacity: 0.5;
        filter:alpha(opacity=50);
        background-color: red;
        border: 4px solid blue;
        margin: 40px;
    }
    .try-rgba{
        height: 300px;
        width: 300px;
        background-color:rgba(255,0,0,0.5);     
        border: 4px solid blue;
        margin: 40px;
    }


    </style>
</head>
<body>
<div class="try-opacity">這是opacity的div</div>
<div class="try-rgba">這是rgba的div</div>
</body>
</html>