大前端学习之旅（3）

关于三栏布局版式的一点思考

问题：假设容器的高度默认100px，其中左栏、右栏的宽度各为300px，中间的宽度自适应的三栏布局如何写？

一、什么是三栏布局？

• 左右固定，中间自适应
• 中间栏放在文档流前面，保证优先加载。

二、三栏布局示意图：

三、实现方法

• 方法1：浮动

• 方法2：绝对定位。

• 方法3：flexbox。移动开发里经常用到。

• 方法4：表格布局 table。已经淘汰

• 方法5：网格布局 grid

• 方法6：双飞翼布局

• 方法7：圣杯布局

四、实现代码

1、方法1：浮动

HTML代码：

//注意元素次序
<div class="left">Left</div>
<div class="right">Right</div>
<div class="main">Main</div>

CSS 代码：

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
//左栏左浮动
.left {
    float: left;
    width: 300px;
    height: 100px;
    background: red;
}
//中间自适应
.main {
    background: blue;
    height: 100px;
    margin:0px 200px 0px 100px;
}
//右栏右浮动
.right {
    background: red;
    width: 300px;
    float: right;
    height: 100px;
}

这种方式代码足够简洁与高效，也容易理解

2、方法2：绝对定位

HTML 代码

<section class="layout absolute">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="right">
                我是 right
            </div>
            <div class="center">
                <h1>绝对定位解决方案</h1>
                我是 center
            </div>
        </article>
    </section>

CSS 代码

.layout.absolute .left-center-right {
    position: relative;
}

.layout.absolute .left {
    position: absolute;
    left: 0;
    width: 300px;
    background: red;
}

/* 【重要】中间的区域，左侧定位300px，右侧定位为300px，即可完成。宽度会自使用 */
.layout.absolute .center {
    position: absolute;
    left: 300px;
    right: 300px;
    background: green;
}

.layout.absolute .right {
    position: absolute;
    right: 0;
    width: 300px;
    background: blue;
}

该方法有个明显的缺点，就是如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

3、方法3：flexbox

• 将中间盒子放置html最开始，保证优先加载
• 使用flex order属性决定三个盒子顺序，左，中，右
• 左盒子和右盒子固定宽度，中间盒子flex:1

HTML 代码：

<div class="box">
    <div class="center">中</div>
    <div class="left">左</div>
    <div class="right">右</div>	
</div>

CSS 代码：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        min-width: 800px;
        height: 100px;
        background: gray;
        display: flex;
    }
    .left{
        width:300px;
        height: 100px;
        background: pink;
        order:-1
    }
    .center{
        height: 100px;
        background: aquamarine;
        width:100%;
        flex:1
        order:1
    }
    .right{
        width:300px;
        height: 100px;
        background: skyblue;
        order:2
    }

4、方法4：表格布局 table

设置整个容器的宽度为100%，设置三个部分均为表格，然后左边的单元格为 300px，右边的单元格为 300px，即可。中间的单元格会自适应

HTML 代码：

<section class="layout table">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>表格布局解决方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>

        </article>
    </section>

CSS 代码：

<style>
        html * {
            padding: 0;
            margin: 0;
        }

        .layout.table div {
            height: 100px;
        }

        /* 重要：设置容器为表格布局，宽度为100% */
        .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: red;
        }

        .layout.table .center {
            background: green;
        }

        .layout.table .right {
            width: 300px;
            background: blue;
        }
    </style>

5、方法5：网格布局 grid

HTML 代码：

 <section class="layout grid">
        <article class="left-center-right">
            <div class="left">
                我是 left
            </div>
            <div class="center">
                <h1>网格布局解决方案</h1>
                我是 center
            </div>
            <div class="right">
                我是 right
            </div>

        </article>
    </section>

CSS 代码：

    <style>
        html * {
            padding: 0;
            margin: 0;
        }

        /* 重要：设置容器为网格布局，宽度为100% */
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;  /* 重要：设置网格为三列，并设置每列的宽度。即可。*/

        }

        .layout.grid .left {
            background: red;
        }

        .layout.grid .center {
            background: green;
        }

        .layout.grid .right {
            background: blue;
        }
    </style>

6、方法6：双飞翼

HTML 代码

    <article class="container">
        <div class="center">
            <div class="inner">双飞翼布局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>

CSS 代码：

    .container {
        min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
    }
    .left {
        float: left;
        width: 300px;
        height: 100px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 100px;
        background: yellow;
    }
    .center .inner {
        margin: 0 300px; //新增部分
    }
    .right {
        float: left;
        width: 300px;
        height: 100px;
        background: blue;
        margin-left: -200px;
    }

方法7：圣杯布局

HTML 代码

  <article class="container">
    <div class="center">
      <h2>圣杯布局</h2>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </article>

CSS 代码：

 .container {
    padding-left: 300px;//为左右栏腾出空间
    padding-right: 300px;
  }
  .left {
    float: left;
    width: 300px;
    height: 100px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -300px;
  }
  .center {
    float: left;
    width: 100%;
    height: 100px;
    background: yellow;
  }
  .right {
    float: left;
    width: 300px;
    height: 100px;
    background: blue;
    margin-left: -300px;
    position: relative;
    right: -300px;
  }

相关解释如下：

• (1)中间部分需要根据浏览器宽度的变化而变化，所以要用100%，这里设左中右向左浮动，因为中间100%，左层和右层根本没有位置上去
• (2)把左层margin负300后，发现left上去了，因为负到出窗口没位置了，只能往上挪
• (3)按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把左右栏定位
• (4)但由于左右栏遮挡住了中间部分，于是采用相对定位方法，各自相对于自己把自己挪出去，得到最终结果

圣杯布局是利用父容器的左、右内边距+两个从列相对定位； 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整