label
label標簽有一個很好的作用就是擴大表單控件元素的點擊區域。
一般有兩種方法可以達到效果：（1）使用label標簽包裹表單控件（2）設置label標簽的for屬性和表單的id屬性一致
這意味着有三種方式可以實現
1 <label for="checkbox"></label><input type="checkbox" id="checkbox" />
2 <label><input type="checkbox" /></label>
3 <label for="checkbox"><input type="checkbox" id="checkbox" /></label>
for和id可訪問性好於label標簽包裹 最好選用第一種方式-------至於原因http://www.zhangxinxu.com/wordpress/2011/07/%e8%af%b4%e8%af%b4html5%e4%b8%adlabel%e6%a0%87%e7%ad%be%e7%9a%84%e5%8f%af%e8%ae%bf%e9%97%ae%e6%80%a7%e9%97%ae%e9%a2%98/（張鑫旭博客 說說HTML5中label標簽的可訪問性問題）
background-position
background-position屬性設置背景圖像的起始位置。
注意對於這個工作在Firefox和Opera，background-attachment必須設置為 "fixed（固定）".
| 默認值: | 0% 0% |
|---|---|
| 繼承: | no |
| 版本: | CSS1 |
| JavaScript 語法: | object object.style.backgroundPosition="center" |
屬性值
| 值 | 描述 |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom |
如果僅指定一個關鍵字，其他值將會是"center" |
| x% y% | 第一個值是水平位置，第二個值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個值，其他值將是50％。 。默認值為：0％0％ |
| xpos ypos | 第一個值是水平位置，第二個值是垂直。左上角是0。單位可以是像素（0px0px）或任何其他 CSS單位。如果僅指定了一個值，其他值將是50％。你可以混合使用％和positions |
| inherit | 指定background-position屬性設置應該從父元素繼承 |
(1057x291)
HTML代碼：
<link rel="stylesheet" type="text/css" href="style.css" /> <div class="div"> </div>
css:
.div{ border:1px solid pink; width:151px; height:582px; background:url(girl.png) no-repeat; background-position:center; }
效果如下：
background-position:center top;
其他效果可以想象；
關於background-position：-xpx,-ypx;
css:
.div{ border:1px solid pink; width:302px; height:582px; background:url(girl.png) no-repeat; background-position:0px 0px; }
效果：
background-position：-151px -100px;
效果：
——————————————————————————————————————————————————————————————————————
關於checkbox/radio表單自定義樣式
兩種方法：
需要將表單元素進行隱藏：display:none;或者visibility：hidden；
<1>偽元素法：
HTML：
<input type="radio" id="radio1" name="radio" class="radio" /> <label for="radio1" > </label> <input type="checkbox" id="checkbox1" name="checkbox1" class="checkbox"><label for="checkbox1"></label>
css:
/*此處使用了兄弟選擇器 在HTML中label標簽在input標簽的后面*/
.radio+label{ border-radius: 50%; width:16px; height: 16px; border:1px solid #d9d9d9; display: inline-block; } .radio:checked+label,.checkbox:checked+label{ border:1px solid #d73d32; } .radio:checked+label:before{ border-radius: 50%; width:8px; height:8px; line-height: 8px; position:relative; top:-30%; content: ''; display: inline-block; text-align: center; background: #d73d32; } .checkbox+label{ width:16px; height:16px; border:1px solid #d9d9d9; display: inline-block; } .checkbox:checked+label:before{ width:8px; height:8px; line-height: 8px; position:relative; top:-25%; content: '\2713'; /*使用特殊字符需要加斜杠*/ color:#d73d32; display: inline-block; text-align: center; }
<2>雪碧圖的方法：
HTML
<input type="radio" id="radio1_sprite" name="radio" class="radio_sprite" /> <label for="radio1_sprite" > </label> <input type="checkbox" id="checkbox1_sprite" name="checkbox1" class="checkbox_sprite"><label for="checkbox1_sprite"></label>
css：
.radio_sprite+label,.checkbox_sprite+label{ width:16px; height:16px; background: url(ck/bg.png) no-repeat; display: inline-block; } .radio_sprite+label{ background-position: -24px -10px; } .radio_sprite:checked+label{ background-position: -59px -10px; } .checkbox_sprite+label{ background-position: -24px -32px; } .checkbox_sprite:checked+label{ background-position: -59px -32px; }
雪碧圖定義：CSS雪碧 即CSS Sprites，也有人叫它CSS精靈，是一種CSS圖像合並技術，該方法是將小圖標和背景圖像合並到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。
CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味着你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。
優點
減少加載網頁圖片時對服務器的請求次數
可以合並多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
提高頁面的加載速度
sprite 技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
減少鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。
不足
CSS雪碧的最大問題是內存使用
除非這個雪碧圖片是被非常小心的組織，你就會最終使用大量的無用的空白。一個例子是來自於WHIT TV的網站。注意這是一個1299×15,000像素的PNG圖片。它也被壓縮的很好--實際下載大小只有大概26K - 但是瀏覽器並不會渲染壓縮后的圖片數據。當這個圖片被下載並被解壓縮之后，它將占用差不多75MB的內存 (1299 * 15000 * 4)。如果這個圖片並沒有使用alpha透明，它將會被優化至1299 * 15000 * 3，但是要在損失渲染速度的情況下。即使那樣，我們也會討論55MB。這張圖片的大部分其實就是空白，那里什么都沒有，沒有任何有用的內容。只是加載 WHIT主頁 就會導致你的瀏覽器的內存占用上升到至少75+MB，僅僅是因為那一張圖片。(PS:遺憾的是，該網站最近已經改版，文中提到的圖片已經不存在了)
影響瀏覽器的縮放功能
如果一個使用CSS雪碧的頁面使用一些瀏覽器提供的整頁縮放功能縮放了，瀏覽器就需要做一些額外的工作來糾正這些圖片邊緣的行為--基本上來說，是為了避免雪碧中相鄰的圖片被"露進來"。這對於小圖片沒有什么問題，但是對於大圖片會是一個性能下降。
拼圖維護比較麻煩
拼合這么多圖片，需要耐心。同時還要時刻思考如何在使用這個圖片是不會產生相互的影響。將又瘦又高的圖片和又寬又矮的圖片放到一起時，不容易操作。如果要修改雪碧中的一個圖片，你就要修改整張圖片，這無疑會增大工作量。
使CSS的編寫變得困難
如果CSS雪碧足夠復雜，則大大增加了CSS的代碼量和難度，讓維護和修改變得困難起來。
CSS雪碧調用的圖片不能被打印
CSS 雪碧調用的圖片不能被打印，除非在@media中特別添加 print聲明。
錯誤得使用Sprites影響可訪問性
一些剛入門的開發人員會為了節省 HTTP 請求數(這是使用 CSS Sprite 一直強調的好處)而把所有的圖片都當背景圖片來處理 – 甚至是那些傳達重要信息的圖片。結果會導致一個缺乏可訪問性的網站，也會降低 HTML 中 title 和 alt 的潛在益處。
因此，CSS sprite 本身沒錯，而且也不會引發可訪問性問題(事實上，正確得使用會提高可訪問性)。但是不分對錯的過度使用 sprite 會阻礙具有可訪問性和生產率方面的網頁建設進程。