這些是自己的一些記錄，日積累的。僅供參考！
一些技巧：
1、CSS字體屬性簡寫規則字體屬性簡寫規則字體屬性簡寫規則字體屬性簡寫規則
一般用CSS設定字體屬性是這樣做的：
font-weight: bold; font-style: italic; font-varient: small-caps; font-size: 1em; line-height:
1.5em; font-family: verdana,sans-serif
但也可以把它們全部寫到一行上去： font: bold italic small-caps 1em/1.5em verdana,sans-serif
真不錯！只有一點要提醒的：這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設定font-weight, font-style, 以及 font-varient ，他們會使用缺省值，這點要記上。
2、同時使用兩個類同時使用兩個類同時使用兩個類同時使用兩個類 一般只能給一個元素設定一個類（Class），但這並不意味着不能用兩個。事實上，你可以這樣： <p class="text side">...</p> 同時給P元素兩個類，中間用空格格開，這樣所有text和side兩個類的屬性都會加到P元素上來。如果它們兩個類中的屬性有衝突的話，後設置的起作用，即在CSS文件中放在後面的類的屬性起作用。
3、CSS border的缺省值的缺省值的缺省值的缺省值 通常可以設定邊界的顏色，寬度和風格，如：
border: 3px solid #000 這位把邊界顯示成3像素寬，黑色，實線。但實際上這裏只需要指定風格即可
如果只指定了風格，其他屬性就會使用缺省值。一般地，Border的寬度缺省是medium，一般等於3到4個像素；缺省的顏
色是其中文字的顏色。如果這個值正好合適的話，就不用設那麼多了。
4、CSS用於文檔打印用於文檔打印用於文檔打印用於文檔打印 許多網站上都有一個針對打印的版本，但實際上這並不需要，因爲可以用CSS來設定打印風格。 也就是說，可以爲頁面指定兩個CSS文件，一個用於屏幕顯示，一個用於打印： <link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css"
media="print" /> 第1行就是顯示，第2行是打印，注意其中的media屬性。 但應該在打印CSS中寫什麼東西呢？你可以按設計普通CSS的方法來設定它。設計的同時就可以把這個CSS設成顯示CSS來檢查它的效果。也許你會使用 display: none 這個命令來關掉一些裝飾圖片，再關掉一些導航按鈕。要想了解更多，可以看“打印差異”這一篇。
5、圖片替換技巧圖片替換技巧圖片替換技巧圖片替換技巧 一般都建議用標準的HTML來顯示文字，而不要使用圖片，這樣不但快，也更具可讀性。但如果你想用一些特殊字體時，就只能用圖片了。 比如你想整個賣東西的圖標，你就用了這個圖片： <h1><img src="widget-image.gif" alt="Buy widgets" /></h1> 這當然可以，但對搜索引擎來說，和正常文字相比，它們對alt裏面的替換文字幾乎沒有興趣這是因爲許多設計者在這裏放許多關鍵詞來騙搜索引擎。所以方法應該是這樣的： <h1>Buy
widgets</h1> 但這樣就沒有特殊字體了。要想達到同樣效果，可以這樣設計CSS：
h1 {
background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height換成真的圖片的高度。這裏，圖片會當作背景顯示出來，而真正的文字由於設定了-2000像素這個縮進，它們會出現
在屏幕左邊2000點的地方，就看不見了。但這對於關閉圖片的人來說，可能全部看不到了，這點要注意。
6、CSS box模型的另一種調整技巧模型的另一種調整技巧模型的另一種調整技巧模型的另一種調整技巧 這個Box
模型的調整主要是針對IE6之前的IE瀏覽器的，它們把邊界寬度和空白都算在元素寬度上。
比如： #box { width: 100px; border: 5px; padding: 20px }
這樣調用它： <div id="box">...</div>
這時盒子的全寬應該是150點，這在除IE6之前的IE瀏覽器之外的所有瀏覽器上都是正確的。
但在IE5這樣的瀏覽器上，它的全寬仍是100點。可以用以前人發明的Box調整方法來處理這種差異。
但用CSS也可以達到同樣的目的，讓它們顯示效果一致。
#box { width: 150px }
#box div { border: 5px; padding: 20px }
這樣調用： <div id="box"><div>...</div></div> 這樣，不管什麼瀏覽器，寬度都是150點了。
某人使用過的一些經驗：
1、最小高度設置
min-height:50px; /*高度最小值設置爲：50px*/
height:auto !important; /*兼容FF,IE7也支持 !important標籤*/
height:100px; /*兼容ie6*/
2、<meta http-equiv="X-UA-Compatible" content="IE=7" />的意思:將IE8使用IE7進行渲染，這樣使網站在IE8上正常顯
示
（X-UA-Compatible是針對ie8新加的一個設置，對於ie8之外的瀏覽器是不識別的，這個區別與content="IE=7"在無論頁面
是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的標準模式。而content="IE=EmulateIE7"模式遵
循<!DOCTYPE>指令。對於多數網站來說，它是首選的兼容性模式。
目前IE8尚在測試版中，所以爲了避免製作出的頁面在IE8下面出現錯誤，建議直接將IE8使用IE7進行渲染。也就是直接在
頁面的header的meta標籤中加入如下代碼：<meta http-equiv="X-UA-Compatible" content="IE=7" />（如：淘寶網）；
這樣我們才能使得頁面在IE8裏面表現正常！
3、兼容火狐瀏覽器與IE瀏覽器的透明度設置：
filter:Alpha(Opacity=50);
opacity:0.5;
4、要想使網頁變灰色，只需要一句 css 代碼。使用 css 的濾鏡：
view plaincopy to clipboardprint?
html { filter:Gray; }
html { filter:Gray; }或 view plaincopy to clipboardprint?
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }注：樣式加在 body 不能使 Google
Adsense 等用 script 輸出的內容變灰，加在 html 上則可以。
5、簡單幾句去掉鏈接（包括圖片鏈接）的虛線邊框
/* for IE */
a,area { blr:expression(this.onFocus=this.blur()) }
/* for Firefox */
:focus { outline: none; }
6、左右結構CSS調整，一邊固定另一邊自適應
A、左邊固定，右邊自適應
<div>
<div style="float:right;margin:0 0 0 -30px; width:100%">
<div style="margin:0 0 0 30px; background:#e4e4e4">這裏是<Br />右邊的內這裏是<Br />右邊的內這裏是
<Br />右邊的內這裏是<Br />右邊的內這裏是<Br />右邊的內這裏是<Br />右邊的內這裏是<Br />右邊的內這裏是<Br />
右邊的內這裏是<Br />右邊的內這裏是<Br />右邊的內這裏是<Br />右邊的內這裏是<Br />右邊的內這裏是<Br />右邊的
內這裏是<Br />右邊的內容</div>
</div>
<div style="float:left;width:30px; background:#669999">這裏左邊部分</div>
</div>
B、右邊固定，左邊自適應
<div>
<div style="float:right;width:200px; background:#669999">這裏右邊部分</div>
<div style="float:left;margin:0 -215px 0 0; width:100%">
<div style="margin:0 215px 0 0; background:#e4e4e4">這裏是左邊的內容</div>
</div>
</div>
7、圖片背景與顏色背景同時起效技巧
background: url(Bg.gif) no-repeat;
background-position: center 0px;
background-color: #cfe4a3;
需要注意解決的一些問題：
1、拖動滾動條時邊框IE時隱時現，辦法：在邊框的div中加overflow:hidden; height:100%（IE6.0）
2、li裏直接使用img，底部多出幾像素，辦法：在img中加display:block
3、div浮動左（下）面多出幾像素，辦法：浮動中加：display:inline（IE6的BUG，margin在碰到float時會距離會加倍，
也在浮動元素中加display:inline即可）
4、FF瀏覽器div內有浮動，頂部多出幾像素，辦法：在浮動外div中加：display:inline
5、有浮動內容的div在IE6下始終多出幾像素空白，辦法：加一行div，屬性設置爲：clear:both; height:0; line-
height:0; font-size:0;
6、徹底清除浮動：.Clear{clear:both; font-size:0; height:0; line-height:0;}
7、ul中的li設置float:left後，li內的文字會換行，解決方法：li中加li { float: left; white-space:
nowrap;即可
值描述normal默認。空白會被瀏覽器忽略。pre空白會被瀏覽器保留。其行爲方式類似 HTML 中的 <pre> 標籤。nowrap文
本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。pre-wrap保留空白符序列，但是正常地進行換行。
pre-line合併空白符序列，但是保留換行符。inherit規定應該從父元素繼承 white-space 屬性的值。
8、img底部多出幾像素，方法，在img元素加屬性float:left屬性；
9、在做一個後臺佈局是用到Tab切換，切換的內容是表格佈局的數據，但發現火狐下切換時單元格寬度不能正常顯示。（
佈局時，我在第二個開始的Tab內容加了.Hidden{display:none;}這個class，切換Js設置display屬性）。解決辦法：將
class—Hidden去掉，換成style="display:none;"即可；原來是這個class在作怪。
10、CSS註釋，在IE7 FIREFOX下運行正常，在IE6下面竟然一個CSS裏設定的格式都麼有顯示出來。把註釋去掉就顯示正常
了。如果沒要用中文註釋請將註釋改成/*這裏是註釋內容**********/ 這樣就可以顯示了
11、解決使用了float後IE6下li高度比Firefox或者IE8高的問題：在ul的樣式表中增加了zoom:1就ok了
12、要使float元素li不折行，這樣做：
li
{
float:left;
padding-right:16px;
white-space: nowrap;
display:inline-block; （不能加overflow:hidden;）
}
非常感謝這些朋友提供的資料，大家互相研究學習！！