CSS中常見的佈局

1、css中常見的佈局有哪些？

（1）兩列布局

（2）三列布局 

（3）彈性佈局

（4）聖盃佈局

（5）雙飛翼佈局

2、具體實現 

（1）兩列布局

      http://www.javashuo.com/article/p-muoyzgtt-u.html

（2）三列布局

       http://www.javashuo.com/article/p-kdsdxpjw-do.html

（3）聖盃佈局和雙飛翼佈局

     相同點：

　　a、三列布局，中間寬度自適應，兩邊定寬；

　　b、中間欄要在瀏覽器中優先展現渲染；
　　c、容許任意列的高度最高；
　　d、要求只用一個額外的DIV標籤；
　　e、要求用最簡單的CSS、最少的HACK語句；
　　

     不一樣點：

   聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的：

 也就是三欄所有浮動，左右兩欄加上負margin，讓其跟中間欄div並排。

 不一樣在於解決 「中間欄div內容不被遮擋」 問題的思路不同。

    (4)、聖盃佈局

<style>
        .container {
            padding: 0 100px 0 200px;
        }
        .left {
            width: 200px;
            background: red;
            /* 關鍵點：會讓元素沿文檔流向左移動，負數值比較大的話會一直移動到上一行 */
            margin-left: -100%;
            left: -200px;
        }
        .right {
            width: 100px;
            background: blue;

            margin-left: -100px;
            right: -100px;
        }
        .main {
            background: yellow;
            width: 100%;
        }
        .left, .main, .right{
            float: left;
            min-height: 200px;
            position: relative;
        }

    </style>

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

(5)、雙飛翼佈局

<style type="text/css">
        .left, .main, .right {
            float: left;
            min-height: 130px;
            text-align: center;
        }
        .left {
            margin-left: -100%;
            background: green;
            width: 200px;
        }
        .right {
            margin-left: -300px;
            background-color: red;
            width: 300px;
        }
        .main {
            background-color: blue;
            width: 100%;
        }
        .content{
            /* 關鍵點：用margin把div擠到中間正常展現*/
            margin: 0 300px 0 200px;
        }
    </style>

<div class="container">
    　   <div class="main">
    　　 <div class="content">main</div>
</div>
    　　<div class="left">left</div>
    　　<div class="right">right</div>
</div>

(6)、彈性佈局（Flexbox）

　　CSS3引入了一種新的佈局模式——Flexbox佈局，即伸縮佈局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分佈一個容器裏項目佈局，即便它們的大小是未知或者動態的，這裏簡稱爲Flex。
　　Flexbox佈局經常使用於設計比較複雜的頁面，能夠輕鬆的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減小了依賴於浮動佈局實現元素位置的定義以及重置元素的大小。

參考連接：https://www.jianshu.com/p/81ef7e7094e8