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

時間 2019-11-08

標籤 css 佈局雙飛以及使用 flex 實現欄目 CSS 简体版

原文原文鏈接

前言

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

聖盃佈局&雙飛翼佈局

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

聖盃佈局

如下面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%就上去了。css3

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，少了一些相對定位。flex

<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：code

<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>

未完待續...htm