CSS經(jīng)常見(jiàn)樣式
發(fā)表時(shí)間：2023-09-13 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)?lái)CSS常見(jiàn)樣式，使用CSS常見(jiàn)樣式的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。CSS Sprite(雪碧圖)指什么? 有什么作用CSS雪碧圖 即CSS Sprite，也有人叫它CSS精靈圖，是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背...
這次給大家?guī)?lái)CSS常見(jiàn)樣式，使用CSS常見(jiàn)樣式的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
CSS Sprite(雪碧圖)指什么? 有什么作用
CSS雪碧圖 即CSS Sprite，也有人叫它CSS精靈圖，是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來(lái)顯示需要顯示的圖片部分。
img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別
img作為html標(biāo)簽，img使用的圖片一般作為內(nèi)容。
而CSS背景使用圖片一般是用來(lái)修飾。
往更詳細(xì)的方向上來(lái)說(shuō)在網(wǎng)頁(yè)加載的過(guò)程中，以css背景圖存在的圖片會(huì)等到結(jié)構(gòu)加載完成（網(wǎng)頁(yè)的內(nèi)容全部顯示以后）才開(kāi)始加載，而html里的img標(biāo)簽是網(wǎng)頁(yè)結(jié)構(gòu)（內(nèi)容）的一部分會(huì)在加載結(jié)構(gòu)的過(guò)程中加載。圖片做為背景，在圖片沒(méi)加載的時(shí)候或者加載失敗的時(shí)候，不會(huì)有個(gè)圖片的占位標(biāo)記，不會(huì)出現(xiàn)紅叉。
title和alt屬性分別有什么作用
title 屬性規(guī)定關(guān)于元素的額外信息。這些信息通常會(huì)在鼠標(biāo)移到元素上時(shí)顯示一段工具提示文本。alt屬性它規(guī)定在圖像無(wú)法顯示時(shí)的替代文本。
background:url(abc.png) 0 0 no-repeat;這句話是什么意思
這句話為background的簡(jiǎn)寫(xiě)形式，url代表的是background-image插入背景圖片的地址，0 0代表的是background-position的值，表示背景圖的定位，前后兩個(gè)分別是橫向定位和縱向定位。左上角是 0 0，no-repeat代表background-repeat的值。可使用的值有repeat、no-repeat、repeat-x、repeat-y、inherit。分別表示水平垂直重復(fù)、不重復(fù)、僅水平重復(fù)、僅垂直重復(fù)、繼承自父輩元素。
background-size有什么作用? 兼容性如何? 常用的值是?
background-size兼容性
常用的值有auto length cover contain initial inherit;
如何讓一個(gè)div水平居中？如何讓圖片水平居中
div水平居中：
1.外邊距法：通過(guò)對(duì)div設(shè)置外邊距，margin:0 auto；
2.display:inline-block法:父元素設(shè)置text-align:center。需要?jiǎng)≈械膁iv設(shè)置display:inline-block即可。
3.浮動(dòng)法：對(duì)div及其父元素float:left，相對(duì)定位，父元素left50%，div right 50%。
圖片水平居中：將圖片放入塊級(jí)元素中，使用上述方法。
如何設(shè)置元素透明? 兼容性？
可以通過(guò)rgba和opcity設(shè)置語(yǔ)速透明度，針對(duì)ie8及更糟版本的瀏覽器需要添加 filter:alpha(opacity=x)。
opacity和rgba都能設(shè)置透明，有什么區(qū)別？
opacity會(huì)繼承父元素的 opacity 屬性，而RGBA設(shè)置的元素的后代元素不會(huì)繼承不透明屬性。
<html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
.rgba,.opacity{ margin:0 auto; width:200px; height: 200px; text-align: center; line-height: 200px; font-size: 20px; border:1px solid black; } .rgba{ background: rgba(255,0,0,0.5); } .opacity{ background: red; opacity: 0.5; } </style> </head> <body> <div class="rgba"> 這是RGBA不透明度 </div> <div class="opacity"> 這是opacity不透明度 </div> </body> </html>，可以證明opacity可以繼承父元素的屬性。此外，opacity也可以設(shè)置圖片的透明度。
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
JS的閉包與定時(shí)器
JS的時(shí)間對(duì)象與引用類型
用最簡(jiǎn)單的前端技術(shù)制作一個(gè)簡(jiǎn)潔的音樂(lè)播放器
以上就是CSS常見(jiàn)樣式的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
