布局的樣式：兩邊定寬，中間自適應的三欄布局，中間欄放在文件流前面以優先渲染
聖杯布局
1.三塊都設定向左浮動且使用相對定位；
2.包含三塊的父元素設定左右的padding值，給左右兩部分留出空間；
3.中間塊寬度設定為100%；
4.左右兩邊設定負邊距margin-left，左部分設定-100％，右部分設定-width；
5.左右部分為相對定位，左部分left的為-width，右部分right為-width。
<
!doctype html>
"utf-8"
/>
聖杯布局<
/title>
<
/head>
"container"
>
"main"
class
="col"
>
<
/div>
"left"
class
="col"
>
<
/div>
"right"
class
="col"
>
<
/div>
<
/div>
<
/body>
<
/html>
聖杯布局 和 雙飛燕布局
聖杯布局和雙飛翼布局基本上是一樣的，都是兩邊固定寬度，中間自適應的三欄布局，其中，中間欄放到文件流前面，保證先行渲染。解決方案大體相同，都是三欄全部float left浮動，區別在於解決中間欄div的內容不被遮擋上，聖杯布局是中間欄在新增相對定位，並配合left和right屬性，效果上表現為三欄是單...
聖杯布局 和 雙飛燕布局
聖杯布局和雙飛翼布局基本上是一樣的，都是兩邊固定寬度，中間自適應的三欄布局，其中，中間欄放到文件流前面，保證先行渲染。解決方案大體相同，都是三欄全部float left浮動，區別在於解決中間欄div的內容不被遮擋上，聖杯布局是中間欄在新增相對定位，並配合left和right屬性，效果上表現為三欄是單...
雙飛燕布局
布局的效果跟聖杯的一樣，有所不同。雙飛燕布局的 更加簡單，只是多加了乙個div用來布局。基礎布局部分 一樣。main部分 main 這裡不需要加padding了 m content,m leftside,m rightside m content 用左右邊距將左右邊欄的位置預留出來 m c wrap...