首先談談三欄布局
-
三欄布局長什么樣子？
三欄布局是左右兩側浮動，而中間寬度自適應不浮動做出的效果。
三欄布局 三欄布局的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代碼邏輯更簡單； - 缺點：
添加了無意義的標簽； - 實際應用：
個人更偏向于使用雙飛翼布局，但也會根據具體的需求進行使用；
