聖杯布局和雙飛翼布局是經典的三欄布局。實現了左右兩側固定中間自適應的布局。聖杯布局主要是利用float、相對定位、容器的padding來完成布局。
<
!doctype html>
"content-type" content=
"text/html;charset=utf-8"
/>
test page<
/title>
html
body
* #header
#footer
#container
#left
#right
#middle
<
/style>
<
/head>
"header"
>header<
/div>
"container"
>
"middle"
>middle<
/div>
"left"
>left<
/div>
"right"
>right<
/div>
<
/div>
"footer"
>footer<
/div>
<
/body>
<
/html>直接給**可能有點亂，具體的步驟是：
1.設定各個元素的寬高，設定middle的寬度為100%。
2.設定容器container為bfc，可以包裹住float元素，並且對後面的元素不造成影響。
3.使left、right、middle脫離文件流，設定float屬性。
4.設定容器container的padding屬性，製造空白，留出left和right的位置。
5.設定left和right的margin-left屬性為-100%和-rightwidth，使其和middle處於同一層。
6.設定left、right、middle元素的position屬性為relative，令他們可以相對於他們的正常位置移動。
7。設定left元素的left屬性值為-leftwidth，right元素的right屬性值為-rightwidth。可以她們移動到正確的位置，不擋住中間的middle元素。
效果圖：
實現雙飛翼布局和聖杯布局很像，只是實現中間自適應部分的方式不一樣，雙飛翼布局在middle中又加入了middle-inner，用middle-inner的margin來製造空白是left和right可以放在左右側。
<
!doctype html>
"content-type" content=
"text/html;charset=utf-8"
/>
test page<
/title>
html
body
* #header
#footer
#container
#left
#right
#middle
#middle-inner
<
/style>
<
/head>
"header"
>header<
/div>
"container"
>
"middle"
>
"middle-inner"
>middle-inner<
/div>
<
/div>
"left"
>left<
/div>
"right"
>right<
/div>
<
/div>
"footer"
>footer<
/div>
<
/body>
<
/html>直接給**可能有點亂，具體的步驟是：
1.設定好各個div的寬高，中間自適應部分width為100%。
2.設定container為bfc，可以包裹住float元素，使其他元素不受影響。
3.脫離文件流，設定middle、left、right的float屬性。
4.設定middle-inner的margin，製造空白留出left和right的位置。
5.left和right使用margin-left屬性使其固定到自己的位置。
效果圖：
布局 聖杯布局 雙飛翼布局
隨著前端技術的發展推進，web端的布局方式已基本成熟，那麼在 布局方式中，三列布局最為常用，布局方式也有很多，漸漸的開發者們開始從效率的角度優化自己的 如果三排布局能將中間的模組放在dom樹前面，那麼瀏覽器在做重繪的時候不久有限顯示了嗎？機制的開發者們開始圍繞者這個方向進行了dom的優化，於是誕生了...
聖杯布局 雙飛翼布局
前言 上班划水偷空了解了一下聖杯布局和雙飛翼布局，一聽這兩個名字，覺得不明覺厲，其實就是三欄布局，左右兩邊的盒子寬度固定，中間的盒子寬度自適應。以下內容均是總結網際網路上別人的文章。覺得有意思就記錄一下。聖杯布局，方法一 container middle left right style head ...
css兩欄布局 聖杯布局 雙飛翼布局
最近幾個月一直用vue在寫手機端的專案，主要寫業務邏輯，在js方面投入的時間和精力也比較多。這兩天寫頁面明顯感覺css布局方面的知識有不足，所以複習一下布局方法。box1 left box1 right 兩列自適應 box1 box1 left box1 right box1 box1 left b...