一、boder在某些情況下會觸發BFC環境,一般用輪廓(outline)而不用邊框
二、雪碧圖技術(精靈圖)
是一種CSS圖像合並技術:(循環);是將小圖標和背景圖像合並到一張圖片上,然后利用css的背景定位來顯示需要顯示的圖片部分。
優點:1)減少加載網頁圖片時對服務器的請求次數
可以合並多數背景圖片和小圖標,方便在任何位置使用,這樣不同位置的請求只需要調用一個圖片,從而減少對服務器的請求次數,降低服務器壓力,同時提高了頁面的加載速度,節約服務器的流量。
2)提高頁面的加載速度
sprite 技術的其中一個好處是圖片的加載時間(在有許多 sprite 時,單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表,而單獨分割的每一張 GIF 都有自己的一個色表,這就增加了總體的大小。因此,單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
3)減少鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片,所以,如果使用多張圖片,鼠標滑過會出現閃白的現象。使用CSS雪碧,由於一張圖片即可,所以不會出現這種現象。
不足:1)CSS雪碧的最大問題是內存使用
2)拼圖維護比較麻煩
3)使CSS的編寫變得困難
4)CSS 雪碧調用的圖片不能被打印
三、解決兼容性
1)reset重置技術;normalize技術
2)加前綴
3)<!doctype>解析模式
4)CSS中的Hack技術
5)條件注釋
6)倒入包
四、瀏覽器兼容性
1)opacity(filter)
2)PNG背景
3)圓角(倒包,圖片)
4)BFC
5)雙倍margin兼容問題
6)在IE下有3PXz差距
7)font-size;
五、條件注釋一定要寫完整