頁(yè)面布局

題目1：三欄布局，中間自適應(yīng)，左右兩欄固定寬度300px

寫出3種方案算是及格
給出5種方案，不管使用哪種方案，最終效果都是：

首先寫出html結(jié)構(gòu)：

    <div class="wrapper">
        <div class="left">zuo</div>
        <div class="center">左右兩列固定，中間自適應(yīng)</div>
        <div class="right">you</div>
    </div>

方案一：float

優(yōu)點(diǎn)：兄弟元素和父元素的浮動(dòng)影響處理的好的話，就是比較簡(jiǎn)單，兼容性也比較好。
缺點(diǎn)：浮動(dòng)是脫離文檔流的，常見的問(wèn)題是清除浮動(dòng)。清除不好會(huì)帶來(lái)很多問(wèn)題，比如高度塌陷等。

     .wrapper {
        overflow: hidden;
    }

    .left {
        float: left;

        width: 300px;
        background: pink;
    }

    .right {
        float: right;

        width: 300px;
        background: pink;
    }

    .center {
        margin: 0 300px;

        background: gray;
    }

以上css樣式設(shè)置完成后，效果是這樣子的：

為什么會(huì)出現(xiàn)這種情況呢？？？這是因?yàn)?br> html結(jié)構(gòu)要改成這樣：

    <div class="wrapper">
        <div class="left">zuo</div>        
        <div class="right">you</div>
        <div class="center">左右兩列固定，中間自適應(yīng)</div>
    </div>

延伸：你知道哪些清除浮動(dòng)的方案？每種方案的有什么優(yōu)缺點(diǎn)?

方案二：absolute

左右兩欄absolute，中間欄設(shè)置margin值。
優(yōu)點(diǎn)：思路簡(jiǎn)單，不容易出問(wèn)題
缺點(diǎn)：絕對(duì)定位是脫離文檔流的，意味著所有的子元素也必須脫離文檔流；代碼較多，可使用性差。

      .wrapper {
        position:relative;
    }
    .left {
        position:absolute;
        top:0;
        left:0;

        width: 300px;
        background: pink;
    }

    .right {
        position:absolute;
        top:0;
        right:0;

        width: 300px;
        background: pink;
    }
    .center {      
        margin:0 300px;

        background: gray;
    }

方案三：flex布局

優(yōu)點(diǎn)：相對(duì)完美的方案。
缺點(diǎn)：不兼容IE8及以下瀏覽器，而且三欄同時(shí)增高。

    .wrapper {
        display:flex;
    }
    .left,.right {
        flex:0 0 300px;

        width: 300px;
        background: pink;
    }
    .center {      
        flex:1;
     
        background: gray;
    }

方案四：table布局

優(yōu)點(diǎn)：兼容性好，適用于很多場(chǎng)景。在flex布局不兼容的時(shí)候，可以使用table布局。
缺點(diǎn)：處于一行的單元格table-cell會(huì)同時(shí)增高，有時(shí)我們并不想要這種效果。

    .wrapper {
        display:table;
        width:100%;   //撐滿整個(gè)屏幕的寬
    }
    .wrapper >div{
       display:table-cell;
    }
     .left,.right {
        width: 300px;
        background: pink;
    }
    .center {
        background: gray;
    }

方案五：grid布局

優(yōu)點(diǎn)：新的技術(shù)，代碼量簡(jiǎn)化
缺點(diǎn)：瀏覽器對(duì)其支持很弱，而且三欄同時(shí)增高

步驟：

• 設(shè)置display的值為grid，聲明容器是一個(gè)網(wǎng)格容器
• 設(shè)置網(wǎng)格行和列，我們可以通過(guò)grid-template-columns和grid-template-rows
  教程--->>>CSS Grid布局：快速入門

    .wrapper {
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
    }
     .left, .right {
        background: pink;
    }
    .center {
        background: gray;
    }

延伸提問(wèn)

答完題后，面試官會(huì)延伸提問(wèn)
1）5中方案各自的優(yōu)缺點(diǎn)
2）如果考慮縱向，哪種方案就不再適用

• 當(dāng)高度未知時(shí)
  使用flex布局、table布局和grid布局，當(dāng)我們中間欄的高度隨著內(nèi)容增加時(shí)，其他兩欄也同時(shí)增高。效果：

  
  

• 當(dāng)高度已知時(shí)
  flex布局、table布局仍然會(huì)同時(shí)增高，而grid布局中間的內(nèi)容會(huì)溢出來(lái)，效果：

  
  

3）5種方案的兼容性，哪種是最優(yōu)的方案？
顯然是flex布局、table布局。

題目2：上下兩欄固定，中間滾動(dòng)

上下高度固定，中間自適應(yīng)：APP用的非常多，上邊是header，中間是內(nèi)容，隨著內(nèi)容的增多會(huì)出現(xiàn)滾動(dòng)條，下邊是導(dǎo)航，比如美團(tuán)、淘寶、京東。
先來(lái)看一下效果：

首先寫出html結(jié)構(gòu)：

    <div class="wrapper">
        <div class="header">header</div>
        <div class="content">
            上下兩欄固定，中間滾動(dòng)<br/>
            上下兩欄固定，中間滾動(dòng)<br/>
            <!-- 此處省略n個(gè)-->
        </div>
        <div class="footer">footer</div>
    </div>

方案一：使用position

    .wrapper {
        position:relative;
        height: 100%;
    }
    .header {
        height: 100px;
        background: pink;
    }
    .content {
        position:absolute;
        top:100px;
        bottom:25px;
        overflow: auto;

        width:100%;
        background: green;
    }
    .footer {
        position:fixed;
        left:0;
        bottom:0;

        width:100%;
        height: 25px;
        background: grey;
    }

這里需要說(shuō)明的是：凡是給元素position為absolute/fixed和float后，元素脫離文檔流后會(huì)導(dǎo)致無(wú)法計(jì)算自己的寬度和高度，display屬性會(huì)隱式的變?yōu)閕nline-block，所以需要設(shè)置width。注意一點(diǎn)的是，position:relative并不能夠改變display的類型。
如果不支持 position:fixed ，可以用position:absolute;來(lái)替代。

方案二：flex布局

    .wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .header {
        height: 100px;

        background: pink;
    }
    .content {
        flex: 1;
        overflow: auto;//滾動(dòng)條

        background: green;
    }
    .footer {
        height: 25px;

        background: grey;
    }

方案三：grid布局

    .wrapper {
        display:grid;
        grid-template-rows: 100px auto 25px; 
        height: 100%;
    }
    .header {
        background: pink;
    }
    .content {
        overflow: auto;        
        background: green;
    }
    .footer {        
        background: grey;
    }

方案四：calc()函數(shù)

你認(rèn)識(shí)calc()函數(shù)嗎？這貨其實(shí)就是一個(gè)計(jì)算長(zhǎng)度值的。

    .wrapper {
        height: 100%;
    }

    .header {
        height: 100px;
        background: pink;
    }

    .content {
        height: calc(100% - 100px - 25px);
        overflow: auto;
        background: green;
    }

    .footer {
        height: 25px;
        background: grey;
    }