什麼是聖杯布局？三欄布局，左右兩欄隨著瀏覽器縮放寬度不變，中間欄自適應
知識點：浮動、定位、padding和margin的區別
我沒有使用大部分教程的方法，但是效果相同。步驟如下：
第一步.定義基本結構和樣式
中間欄左邊欄
右邊欄
因為中間main的寬度佔據了100%，所以剩下的兩個div塊級元素自動換行被擠到下面來了。
第二步，我們要把它們放在同一行，所以就是為main、left、right加上float：right。
效果圖
表明浮動有效，只不過還是同樣的原因。
第三步，使用定位，由於絕對定位是脫離標準流的，所以會浮在藍色塊上方。但是僅僅使用position是不行的，還要為left和right加上邊偏移，left:0或者right:0。
效果圖
已經初有成效了，但是問題在哪兒，中間欄的文字被遮擋，本質就是被左右兩塊覆蓋了，所以現在要讓main移動到中間來。
第四步，此時是使用margin還是padding？答案是padding，因為使用margin後在原來100%的基礎上加上寬度便會出現滾動條。
效果圖
內容成功顯示，瀏覽器縮放之後依然符合要求。
完整源**
中間欄左邊欄
右邊欄
css來實現聖杯布局
聖杯布局的要求 縱向分為上中下三部分，上中下寬度100 上下高度固定 中間部分高度自動。中間被拆分為三欄 左右寬度固定，中間自適應 1.flex布局 doctype html en utf 8 viewport content width device width,initial scale 1.0...
CSS聖杯布局
本文與之前 css雙飛翼布局 一文有些相似，在html結構上他們可以說是相同的。樣式主要表現為浮動 負邊距 定位。在 css雙飛翼布局 中，為了排開左右兩邊遮擋main元素的區域，是給main又新增了乙個子元素，用子元素來控制main所要顯示內容的寬度與位置，這是乙個不錯的方法，但從結構上來講，我們...
CSS 布局3 聖杯布局
聖杯布局是有 的工程師提出，巧妙的利用我們介紹過的定位技術 負邊距 相對定位 浮動 組合運用。輕鬆實現常見布局。我們在前面介紹過，使用浮動特性，實現三列布局，但是使用div布局，有乙個問題，那就是內容區，在左邊區和右邊區之後渲染。下面我們使用聖杯布局的思路，實現乙個內容區渲染在前的三列布局。1 負邊...