CSS中常見的布局

一、css中常見的布局有哪些？

（1）兩列布局

（2）三列布局 

（3）彈性布局

（4）聖杯布局

（5）雙飛翼布局

二、具體實現 

（1）兩列布局

      https://www.cnblogs.com/qing-5/p/11442906.html

（2）三列布局

       https://www.cnblogs.com/qing-5/p/11338819.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