要求
1.兩邊固定 當中自適應
2.當中列要完整顯示
3.當中列要優先載入
"header">header
"content" class="clearfix">
"middle">
middle
middle
middle
middle
middle
middle
middle
middle
"left">left
"right">right
"footer">footer
margin賦值:調整旁邊兩列的位置(使三列布局到一行上)
使用相對定位:調整旁邊兩列的位置（使兩列位置調整到兩頭）
"header">
header
"content">
"middle">
"m_inner">
middle
"left">left
"right">right
"footer">
footer
在middle中定義乙個塊元素 將其padding設定為左右兩列的寬度
**兩組實現的對比:
1.倆種布局方式都是把主列放在文件流最前面，使主列優先載入。
2.兩種布局方式在實現上也有相同之處，都是讓三列浮動，然後通過負外邊距形成三列布局。
3.兩種布局方式的不同之處在於如何處理中間主列的位置：
聖杯布局是利用父容器的左、右內邊距+兩個從列相對定位；
雙飛翼布局是把主列巢狀在乙個新的父級塊中利用主列的左、右外邊距進行布局調整。
三列布局之聖杯布局和雙飛翼布局
簡單理解就是，頁面有三個等高的模組，左右兩個模組寬高固定，中間模組的寬度隨視口的變化而變化。注意點 為了保證中間模組正常顯示，需設定視口最小寬度 要保證中間列優先載入 所以不能單純用浮動解決 在整體布局中，盡量少用絕對定位 html container center center div left ...
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...
布局 聖杯布局和雙飛翼布局
聖杯布局和雙飛翼布局都是為了實現兩邊固定，中間自適應的三列的布局，他的中間欄優先渲染。聖杯布局與雙飛翼布局前面幾步相同 1.寫三個div，中間的那個div放在第乙個 優先渲染 2.給左中右設定浮動，分別設定高度，寬度，顏色 3.左邊模組讓它margin left 100 右邊模組margin lef...