CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局

yuezhongbao發表於2018-03-20
CSSFlex

前言

我曾一度覺得總寫css的前端很low，有了這種思想以後我便遠離網頁佈局，H5的工作更不想接，沉迷於頁面邏輯和封裝元件。直到最近我面試，面試官說我css3理解的不熟，我起初很不屑，但後來靜下來反省了一下並不是我不熟，只是我開始瞧不上網頁製作這種工作了，問我css問題時，我感覺就像是再問一個老粉刷匠這片牆面要從哪裡刷起，從哪裡刷不行 ？這有什麼決定性的問題嗎 ？
說的有點多，其實寫這邊文章的主要目的還是想告訴自己，不要瞧不起某一門技術，技術有高低，但不代表學css的人的技術就要比學js的智商低，術業有專攻，心態要自己掌握，不要受外界的影響。

聖盃佈局&雙飛翼佈局

所謂聖盃佈局和雙飛翼佈局其實解決的問題是相同的，都是解決左右兩欄固定寬度，中間部分自適應，其中某部分內容比其他內容高的時候，保證三者元素等高。
他倆的區別就是：聖盃用padding。雙飛翼用在main外層多加了一個div然後改用margin。

聖盃佈局

以下面html為例：

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

1.main、left、right全部左浮動，在設定一個position：relative稍後會用到。
2.main的寬度設定為100%。left和right固定寬度（假設100px）。
3.此時main自己沾滿了一行，所以給left拽上來設定marginleft：100%，此時left雖然上來了但是是覆蓋在main上面的。
4.給content設定padding-left等於left的寬，此時左邊有100px的空白，main和left都被擠過來了，要想還原，將left向左在移動100px就行了。
5.此時就剩下right在下面，同理margin-right：-100%就上去了。

css程式碼：

  <style>
        * {
            box-sizing: border-box;
        }
        .content {
            overflow: hidden;
            padding-left: 100px;
            padding-right: 100px;
        }
        .content > div {
            float: left;
            position: relative;
        }
        .main {
            width: 100%;
            height:100px;
            border:1px solid red;
        }
        .left {
            width:100px;
            margin-left: -100px;
            right:100%;
            height:100px;
            border:1px solid #000;
        }
        .right {
            width:100px;
            margin-right: -100px;
            height:100px;
            border:1px solid #000;
        }

    </style>

雙飛翼佈局

雙飛翼佈局的html：

    <div class="content">
        <div class="main">
            <div class="main-inner">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

對比一下css的區別：多了一個.main-inner，少了一些相對定位。

    <style>
        * {
            box-sizing: border-box;
        }

        .main-inner {
            margin-left:100px;
            margin-right: 100px;
        }

        .content {
            overflow: hidden;
            /* padding-left: 100px;
            padding-right: 100px; */
        }
        .content > div {
            float: left;
            /* position: relative; */
        }
        .main {
            width: 100%;
            height:100px;
            border:1px solid red;
        }
        .left {
            width:100px;
            margin-left: -100%;
            /* right:100px; */
            height:100px;
            border:1px solid #000;
        }
        .right {
            width:100px;
            /* margin-right: -100px; */
            margin-left: -100px;
            height:100px;
            border:1px solid #000;
        }

    </style>

Flex佈局

相比較兩者，Flex佈局就好理解得多
html和聖盃佈局一樣
css：

 <style>
        * {
            box-sizing: border-box;
        }
        .content {
            overflow: hidden;
            display:flex;
            flex:1
        }
   
        .main {
            flex:1;
            height:100px;
            border:1px solid red;
        }
        .left {
            flex:0 0 100px;
            order:-1;
            height:100px;
            border:1px solid #000;
        }
        .right {
            flex:0 0 100px;
            height:100px;
            border:1px solid #000;
        }

    </style>

未完待續…

相關文章