CSS中的聖盃佈局和雙飛翼佈局的實現，以及它們的異同

首先談談三欄佈局

• 三欄佈局長什麼樣子？ 三欄佈局是左右兩側浮動，而中間寬度自適應不浮動作出的效果。

  

• 三欄佈局的HTML

• 若是我想頁面的main主要內容優先加載呢？效果以下圖： 產生這種效果的緣由是先加載main，而main是塊級元素佔據一整行，致使後面加載的兩側側邊欄被擠到了下行。

  

咱們選擇了聖盃佈局

• 爲何要使用聖盃佈局？ 爲了網頁的優化，主要內容須要優先加載，說白了就是爲了解決三欄佈局的main優先加載的問題，讓網頁在main優先加載的同時還保持普通三欄佈局的樣式；

• 聖盃佈局的製做步驟 1.寫下HTML代碼，規定main、aside、ad的區域，並添加以下樣式

2.使三個區域都處於左浮動狀態，並使main的寬度成父容器的100%；

3.爲兩側側邊欄添加負margin，用以調整位置，其中擺在左邊的aside的margin-left爲-100%，而右邊的ad的margin-left則爲負的其自身的寬度。（利用了浮動元素的負margin到必定值後會使其自身往上一行移動的原理）

4.爲class="ct"的主容器設置左右margin值，使其爲之後的側邊欄定位空出位置，margin的值爲側邊欄的寬。

5.對ad和aside添加position:relative，而後對它們進行定位，移動到兩側，咱們的聖盃佈局就初步作完了，可是還有問題：

• 聖盃佈局留下的問題 1.當我把整個頁面的寬度收縮後，會出現佈局錯亂的效果：

2.產生這個問題的緣由 當頁面收縮時，main由於是其父容器ct的100%的寬度，因此main也會跟着收縮，當main收縮到比aside寬度還要小，這時候父容器ct的100%寬度<aside的寬度，就不能容納aside，因此將其擠到了下一行，ad同理。

3.解決方案 能夠給父容器ct加上一個min-width樣式，min-width的值不能小於ad和aside二者間的寬度最大值，這樣作可使中間的main的寬度始終比ad和aside大，就不會致使佈局錯亂了。

• 聖盃佈局代碼一覽

雙飛翼佈局比聖盃佈局更好？

• 爲何選擇雙飛翼佈局？ 由於雙飛翼佈局不只能知足main處於優先加載的地位，並且更好的解決了聖盃佈局的錯亂問題，且css代碼更簡單，缺點是增長了一個標籤。

• 雙飛翼佈局的製做 1.首先聖盃佈局的步驟到了這一步：

2.給main裏面添加一個內容標籤content，而且設置它的左右margin值爲左右側邊欄的寬度：

3.去掉main的背景色和高度，雙飛翼佈局就作成了

雙飛翼佈局和聖盃佈局的對比

• 優勢： 1.雙飛翼佈局完美解決了聖盃佈局的佈局錯亂問題； 2.雙飛翼佈局CSS代碼邏輯更簡單；
• 缺點： 添加了無心義的標籤；
• 實際應用： 我的更偏向於使用雙飛翼佈局，但也會根據具體的需求進行使用；