1、什麼是CSS框架？     CSS框架是一種你能夠使用在你的web專案中概念上的結構，是別人已經寫完的，而且很完善的CSS定義集合。CSS框架一般是CSS檔案的集合，包括基本風格的字型排版，表單樣式，表格佈局等等，比如：     * grid.css 表格佈局     * layout.css 佈局     * form.css 表單     * general.css CSS常規設定 2、CSS框架的種類：     CSS框架很多，可以說太多了，最近幾年像潮水般湧出。只是國內用CSS框架的不多，倒是PHP框架和Spring框架用的更多些。比較著名的CSS框架如下，不同的框架完成的任務不一定完全一樣，每個框架都有自己的特色：     YUI Grids CSS            Blueprint               YAML CSS Framework            CleverCSS        等等。。。。。。 3、960Grid         由於電腦顯示器有方屏、寬屏，寬屏又分16:9和16:10。解析度更是多種多樣，這麼多不同模式下得使用者如何能看到外觀整齊、一致的網站呢？人們發現一個奇妙的事情：960px的寬度是Very Good！無論什麼屏，那種解析度都通吃。         現在有人專門開發了一組網站架構CSS規則，只要遵守這些簡單的規則（其實就是class類），你就能快速設計出960px寬度的網頁結構來。         這，就是960Grid。 4、法律問題     960網格系統的檔案都是免費的，MIT / GPL開源許可協議。大家可以放心大膽使用。 5、如何使用960Grid框架？

（1）在html檔案中引入相關的外部CSS檔案：

1. <link rel="stylesheet" href="css/reset.css" />
   
2. <link rel="stylesheet" href="css/text.css" />
   
3. <link rel="stylesheet" href="css/960.css" />

      在這必須解釋一下，960.css為主要排版樣式，缺它肯定不行。還有兩個css檔案：reset.css和text.css，它們的主要作用是為了消除瀏覽器間顯示差異準備的，前者消除了html標籤在各瀏覽器間的差異，而後者則主要針對的是字型。 （2）定義一個DIV大容器，放下整個頁面：

1. <
   div class="container_12">
   
2. </div>

    這個DIV塊一定要設定12列還是16列，其實不管12列還是16列寬度都是960px，只不過看你需不需要更細分的列了。 （3）在這個DIV大容器裡開始佈局網頁，首先新增一個LOGO欄，這個欄橫向跨越整個960寬度：

1. <div class="container_12">
   
2.     <div class="grid_12"></div>
   
3. </div>

    此時，注意了，在12列的container中，使用了一個12列的grid，下劃線後數字就是該DIV所佔的列數。當然為了佈局方便，我們一定會加入更多的class或id的，最後如下：

1. <div class="container_12">
   
2.     <div class="grid_12 logo"></div>
   
3. </div>

    設定好.logo的CSS的高和背景圖片後，能看到如下圖所示的介面： （4）設定導航欄     剛才那個logo塊其實已經完工了，但為了清除它對身後的CSS設定影響，建議在每個橫向DIV大塊做完之後，都加上class="clear"進行收尾。所以剛才的程式碼現在更改如下：

1. <div class="container_12">
   
2.     <div class="grid_12"></div>
   
3.     <div class="clear"></div>
   
4. </div>

    然後再加入導航欄的DIV塊，和LOGO一樣，也是一個橫向大塊，設定後代碼如下：

1. <div class="container_12">
   
2.     <div class="grid_12 logo"></div>
   
3.     <div class="clear"></div>
   
4.     <div class="grid_12 nav">
5.         <ul>...</ul>
6.     </div>
   
7. <div class="clear"></div>
8. </div>

    新增樣式後，網頁變為這樣： （5）新增PhotoSlide的位置     一般網站為了漂亮和醒目，會在nav下加入photoslide，有的是js的，有的是flash的，但無論哪種都能把網站襯托起來。當然例子中就不真的放photoslide了。現在要把橫行分為兩個部分：left和right，left寫文字，right放個圖片提提神。     按原案例樣子，left會佔據7列的寬度，right將佔據5列的寬度，7+5=12列！所以一個class用grid_7，另一個用gird_5。然後直接在塊後加上clear類。由於這兩個塊高度一致，邊框也一致，所以都加入一個topslider類設定它們的共同特徵。     現在把程式碼寫好：

1. <div class="container_12">
   
2.     <div class="grid_12 logo"></div>
   
3.     <div class="clear"></div>
   
4.     <div class="grid_12 nav">
   
5.         <ul>...</ul>
   
6.     </div>
   
7. <div class="clear"></div>
8.     <div class="grid_7 topslider"></div>
   
9.     <div class="grid_5 topslider"></div>
   
10.     <div class="clear"></div>
    
11. </div>

    填入其它Html標記和各種素材，完成後，如下圖所示： （6）完成接下來的程式碼     用兩段grid_12的名為class="spacer"的div夾住四篇文章部分，四篇文章分別使用四個grid_3來完成。為什麼是四個grid_3呢？橫向12列，4篇等寬文章，每篇12/4=3！如果到現在你還有這個疑問，說明你其實沒弄明白960grid的原理。建議回到頁首再看下來。     加入很多程式碼後：

1. <div class="container_12">
   
2.     <div class="grid_12 logo"></div>
   
3.     <div class="clear"></div>
   
4.     <div class="grid_12 nav">
   
5.         <ul>...</ul>
   
6.     </div>
   
7. <div class="clear"></div>
8.     <div class="grid_7 topslider"></div>
   
9.     <div class="grid_5 topslider"></div>
   
10.     <div class="clear"></div>
    
11.     <div class="grid_12 spacer"></div> 
    
12.     <div class="clear"></div> 
    
13.     <div class="grid_3"></div> 
    
14.     <div class="grid_3"></div> 
    
15.     <div class="grid_3"></div> 
    
16.     <div class="grid_3"></div> 
    
17.     <div class="clear"></div> 
    
18.     <div class="grid_12 spacer"></div> 
    
19.     <div class="clear"></div> 
    
20.     <div class="grid_4 footer"></div> 
21.     <div class="grid_4 footer"></div> 
    
22.     <div class="grid_4 footer"></div>
    
23. </div>

    然後新增內容，設定CSS，就是這個頁面了：     到目前為止，能明白960Grid原理就達到目的。接下來的是關於這個框架的高階內容部分。 高階部分： （1）alpha和omega引數     預設情況下，左右margin都是10px，則列間距為20px，但最左邊的容器不需要左margin，最右邊的容器不需要右margin，所以要改成這樣，用alpha出去左margin，omega除去右margin：

1. <div class="container_12″>
   
2.     <div class="grid_2 alpha">左側導航欄</div>
   
3.     <div class="grid_8″>主版塊</div>
4.     <div class="grid_2 omega">右側廣告欄</div>
   
5. </div>

（2）prefix和suffix引數     如同上面那兩個margin快捷引數一樣，不必非得單獨為某個div單獨命名id或class，960Grid已經提供了prefix和suffix來處理padding。左側補白（padding-left）是prefix_i，右側的是suffix_i。i的值就是補白所佔的列數，比如你想左側加2列補白，則可以使用：

1. <div class="grid_5 prefix_2"></div>

    多簡單。 （3）push和pull引數     最絕的還是這兩個引數，一般人用的不多。因為大家都滿足自己的網頁寬度是960px了，如果現在真想把其中一個涉及到圖片或廣告的div做到1024px寬，怎麼辦？其實很好解決，一個div做reletive，它的子div的為absolue並且left為負值就可以，但這種CSS有點麻煩。     960Grid提供push和pull引數，push是推，pull是拉。關鍵是在什麼位置推拉，就是說那裡才是動作的起點？我們瀏覽網頁時幾乎都是自左向右看，所以該動作也以左側為起點，現在想象你就站在最左邊。push_i就是把一個塊向右推移i個列寬，pull_i就是把這個塊向左拉i個列寬。     push和pull動作對其他兄弟塊沒有影響。可以直接推出960px去它就在整個網頁右邊獨單顯示了，也可以pull出來，就在左邊單獨顯示了。有點像sohu側邊廣告的感覺。上個圖，直觀感受下吧，但sohu可不是用push和pull做出來的，我的意思是和sohu的效果一樣。 （4）clear引數     class="clear"，什麼時候用呢。當你想換行的時候就使用它，即使一個橫行只有grid_5和grid_4，就是說沒有佔滿12列，也可以在其後增加一個讓其後的任何內容都從下一行行首開始：

1. <div class="clear"></div>

    如果遇到這種情況：

1. <div class="grid_4"></div>
   
2. <div class="grid_5"></div>
   
3. <div class="clear"></div>
   
4. <div class="grid_3"></div>

    原本橫向佔滿12列的4+5+3，中間夾個clear。會發生什麼事呢？grid_3這個塊就會從下一個橫行最左邊出現。所以clear就是一個回車，相當於 塊的<br />。     好了總結下：     A、margin引數是alpha和omega；     B、padding引數是prefix和suffix；     C、脫離文件流移動引數是push和pull；     D、clear是塊回車換行。