【知识梳理】3.1页面布局

时间 2019-11-10

标签知识梳理 3.1 页面布局繁體版

原文原文链接

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

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.五种方案优缺点？html

浮动：脱离文档流，常见问题在于清除浮动，优势是兼容性比较好；
绝对定位：优势是快捷，缺点是布局脱离文档流，那么其子元素也要脱离文档流，致使有效性（可以使用性）比较差；
flexbox:css3中新出现的解决方式，可解决前两个方案的不足，是比较完美的,不兼容ie8，在现代移动端，基本使用flex布局；
table:历史上提及麻烦，操做繁琐，对seo不友好，当某一个单元格高度变化时，其他表格跟着调整高度，但有的场景不须要；优势：兼容性很是好，pc可兼容ie8；
grid:新技术，960宽，12列，代码简单；

2.假设高度不肯定，根据中间文字自适应，哪一个适用？css3

不能用：浮动，绝对定位，grid
能用：flexbox，table

3.5种方案的兼容性如何？最优方案是哪一个？
4.延伸布局

三栏式布局： 1.左右宽度固定，中间自适应; 2.上下高度固定，中间自适应;栗子
两栏式布局： 1.左宽度固定，右自适应;栗子 2.右宽度固定，左自适应; 3.上宽度固定，下自适应; 4.下宽度固定，上自适应;

7.示例

三栏式布局的5种方案

页面宽度变小时

文字内容将高度撑开