页面布局

Date：Mar 11, 2018 Author：Helene

本文章采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。转载请注明来自Helene的博客

题目：假设高度已知，请写出三栏布局，其中左、右各300px，中间自适应

公用
html * {
        padding: 0;
        margin: 0;
    }

    .case {
        margin-bottom: 30px;
    }

    .case div {
        height: 300px;
    }

    .case div:nth-of-type(1) {
        background-color: red;
    }

    .case div:nth-of-type(2) {
        background-color: yellow;
    }

    .case div:nth-of-type(3) {
        background-color: blue;
    }

浮动解决方案

<style>
.case.float .left {
        width: 300px;
        float: left;
    }

    .case.float .right {
        width: 300px;
        float: right;
    }
</style>
<section class="case float">
    <h2>浮动解决方案</h2>
    <article>
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </article>
</section>

绝对定位解决方案

<style>
.case.position .left {
        position: absolute;
        left: 0;
        width: 300px;
    }

    .case.position .center {
        position: absolute;
        left: 300px;
        right: 300px;
    }

    .case.position .right {
        position: absolute;
        right: 0;
        width: 300px;
    }
</style>
<section class="case position">
    <h2>绝对定位解决方案</h2>
    <article>
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>

flexBox解决方案

<style>
 .case.flex {
            margin-top: 330px;
        }

        .case.flex article{
            width: 100%;
            display: flex;
        }

        .case.flex .left {
            width: 300px;
        }

        .case.flex .center {
            flex: 1 1 auto;
        }

        .case.flex .right {
            width: 300px;
        }

</style>
<section class="case flex">
    <h2>flexBox解决方案</h2>
    <article>
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>

表格布局解决方案

<style>
.case.table article {
        display: table;
        width: 100%;
    }

    .case.table .left {
        display: table-cell;
        width: 300px;
    }

    .case.table .center {
        display: table-cell;
    }

    .case.table .right {
        display: table-cell;
        width: 300px;
    }
</style>
<section class="case table">
    <h2>表格布局解决方案</h2>
    <article>
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>

网格布局解决方案

<style>
    .case.grid article {
        display: grid;
        width: 100%;
        grid-template-columns: 300px auto 300px;
        grid-template-rows: 300px;
    }
</style>
<section class="case grid">
    <h2>网格布局解决方案</h2>
    <article>
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>

思考：以上5种答案已经列出，那么这5种答案分别有哪些优缺点? 思考：如果中间内容过多，撑开了高度，那么以上哪种方案可以使用，哪种方案不可以使用？ 思考：这5种方案兼容性如何？

页面布局小结：

1.语义化掌握到位
2.页面布局理解要深刻
3.CSS基础知识扎实
4.思维灵活且积极上进
5.代码书写规范