CSS常見樣式
- php中世界最好的语言原創
- 2018-03-08 15:40:531979瀏覽
這次帶給大家CSS常見樣式，使用CSS常見樣式的注意事項有哪些，以下就是實戰案例，一起來看一下。
CSS Sprite(雪碧圖)指什麼?有什麼作用
CSS雪碧圖即CSS Sprite，也有人叫它CSS精靈圖，是一種CSS影像合併技術，該方法是將小圖示和背景影像合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。
img標籤和CSS背景使用圖片在使用場景上有何區別
img作為html標籤，img使用的圖片一般作為內容。
而CSS背景使用圖片一般是用來修飾。
往更詳細的方向上來說在網頁加載的過程中，以css背景圖存在的圖片會等到結構加載完成（網頁的內容全部顯示以後）才開始加載，而html裡的img標籤是網頁結構（內容）的一部分會在載入結構的過程中載入。圖片做為背景，在圖片沒載入的時候或載入失敗的時候，不會有個圖片的佔位標記，不會出現紅叉。
title和alt屬性分別有什麼作用
title 屬性規定關於元素的額外資訊。這些資訊通常會在滑鼠移到元素上時顯示一段工具提示文字。 alt屬性它規定在圖像無法顯示時的替代文字。
background:url(abc.png) 0 0 no-repeat;這句話是什麼意思
這句話為background的簡寫形式，url代表的是background- image插入背景圖片的位址，0 0代表的是background-position的值，表示背景圖的定位，前後兩個分別是橫向定位和縱向定位。左上角是 0 0，no-repeat代表background-repeat的值。可使用的值有repeat、no-repeat、repeat-x、repeat-y、inherit。分別表示水平垂直重複、不重複、僅水平重複、僅垂直重複、繼承自父輩元素。
background-size有什麼作用? 相容性如何? 常用的值是?
background-size相容性
常用的值有auto |length|cover|contain|initial|inherit;
如何讓一個div水平居中？如何讓圖片水平居中
div水平居中：
1.外邊距法：透過對div設定外邊距，margin:0 auto;
2.display:inline-block法:父元素設定text-align:center。需要劇中的div設定display:inline-block即可。
3.浮動法：對div及其父元素float:left，相對定位，父元素left50%，div right 50%。
圖片水平居中：將圖片放入區塊級元素中，使用上述方法。
如何設定元素透明? 相容性？
可以透過rgba和opcity設定語速透明度，針對ie8及更糟版本的瀏覽器需要增加 filter:alpha(opacity=x)。
opacity和rgba都能設定透明，有什麼差別？
opacity會繼承父元素的 opacity 屬性，而RGBA設定的元素的後代元素不會繼承不透明屬性。
<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也可以設定圖片的透明度。
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是CSS常見樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！