【知識梳理】3.1頁面佈局

題目：假設高度已知，請寫出三欄佈局，其中左欄、右欄各爲300px，中間自適應。

---

0.基礎樣式

<style media="screen">
        html *{
            padding: 0;
            margin: 0;
        }
        .layout{
            margin-top: 20px;
        }
        .layout article div{
            min-height: 100px;
        }
    </style>

1.浮動佈局

<!--浮動佈局-->
    <section class="layout float">
        <style media="screen">
            .layout.float .left{
                float: left;
                width: 300px;
                background-color: red;
            }
            .layout.float .right{
                float: right;
                width: 300px;
                background-color: red;
            }
            .layout.float .center{
                background-color: blue;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮動解決方案</h1>
                1.這是三欄佈局的中間部分
                2.這是三欄佈局的中間部分
                3.這是三欄佈局的中間部分
                4.這是三欄佈局的中間部分
                5.這是三欄佈局的中間部分
                6.這是三欄佈局的中間部分
            </div>
        </article>
    </section>

2.絕對佈局

<!--絕對佈局-->
    <section class="layout absolute">
        <style>
            .layout.absolute .left-center-right>div{
                position: absolute;
            }
            .layout.absolute .left{
                left: 0;
                width: 300px;
                background-color: red;
            }
            .layout.absolute .center{
                left: 300px;
                right: 300px;
                background-color: blue;
            }
            .layout.absolute .right{
                right: 0;
                width: 300px;
                background-color: red;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>絕對定位解決方案</h1>
                1.這是三欄佈局的中間部分
                2.這是三欄佈局的中間部分
                3.這是三欄佈局的中間部分
                4.這是三欄佈局的中間部分
                5.這是三欄佈局的中間部分
                6.這是三欄佈局的中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>

3.flexbox佈局

<!--flexbox佈局-->
    <section class="layout flexbox">
        <style>
            .layout.flexbox{
                margin-top: 140px;
            }
            .layout.flexbox .left-center-right{
                display: flex;/*聲明此容器是flexbox佈局*/
            }
            .layout.flexbox .left{
                width: 300px;
                background-color: red;
            }
            .layout.flexbox .center{
                flex: 1;/*此部分自適應*/
                background-color: blue;
            }
            .layout.flexbox .right{
                width: 300px;
                background-color: red;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>flexbox解決方案</h1>
                1.這是三欄佈局的中間部分
                2.這是三欄佈局的中間部分
                3.這是三欄佈局的中間部分
                4.這是三欄佈局的中間部分
                5.這是三欄佈局的中間部分
                6.這是三欄佈局的中間部分
            </div>
            <div class="right"></div>
        </article>        
    </section>

4.表格佈局

<!-- 表格佈局 -->
    <section class="layout table">
        <style>
            .layout.table .left-center-right{
                width: 100%;
                display: table;
                height: 100px;
            }
            .layout.table .left-center-right>div{
                display: table-cell;
            }
            .layout.table .left{
                width: 300px;
                background-color: red;
            }
            .layout.table .center{
                background-color: blue;            
            }
            .layout.table .right{
                width: 300px;
                background-color: red;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>表格佈局解決方案</h1>
                1.這是三欄佈局的中間部分
                2.這是三欄佈局的中間部分
                3.這是三欄佈局的中間部分
                4.這是三欄佈局的中間部分
                5.這是三欄佈局的中間部分
                6.這是三欄佈局的中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>

5.網格佈局

<!-- 網格佈局 -->
    <section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows:100px;
                grid-template-columns:300px auto 300px;
            }
            .layout.grid .left{
                background-color: red;
            }
            .layout.grid .center{
                background-color: blue;
            }
            .layout.grid .right{
                background-color: red;
            }
        </style>
        
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h1>網格佈局解決方案</h1>
                1.這是三欄佈局的中間部分
                2.這是三欄佈局的中間部分
                3.這是三欄佈局的中間部分
                4.這是三欄佈局的中間部分
                5.這是三欄佈局的中間部分
                6.這是三欄佈局的中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>

6.延伸

1.五種方案優缺點？

• 浮動：脫離文檔流，常見問題在於清除浮動，優勢是兼容性比較好；
• 絕對定位：優勢是快捷，缺點是佈局脫離文檔流，那麼其子元素也要脫離文檔流，致使有效性（可以使用性）比較差；
• flexbox:css3中新出現的解決方式，可解決前兩個方案的不足，是比較完美的,不兼容ie8，在現代移動端，基本使用flex佈局；
• table:歷史上提及麻煩，操做繁瑣，對seo不友好，當某一個單元格高度變化時，其他表格跟着調整高度，但有的場景不須要；優勢：兼容性很是好，pc可兼容ie8；
• grid:新技術，960寬，12列，代碼簡單；

2.假設高度不肯定，根據中間文字自適應，哪一個適用？

• 不能用：浮動，絕對定位，grid
• 能用：flexbox，table

3.5種方案的兼容性如何？最優方案是哪一個？
4.延伸

• 三欄式佈局： 1.左右寬度固定，中間自適應; 2.上下高度固定，中間自適應;栗子
• 兩欄式佈局： 1.左寬度固定，右自適應;栗子 2.右寬度固定，左自適應; 3.上寬度固定，下自適應; 4.下寬度固定，上自適應;

7.示例

• 三欄式佈局的5種方案

• 頁面寬度變小時

• 文字內容將高度撐開