页面布局之三栏布局

页面布局是每个前端开发者必经的过程，看似乎简单的东西，越难理解。就比如css问题，真的想学好css，我想这比js还难。当然在日常工作中也用不到那么东西，本人也上班有几个月了，工作中几乎也不怎么写页面，因为我们公司前端页面都时生成的，只需要改改样式啥的，特殊需要的才会写样式。主要用的也就是js操作来写基本的业务逻辑了。

说说三栏布局吧，这类布局比较常见，网上也比较多。这算了对自己的巩固吧。

三栏布局一般是都是两侧固定，中间自适应的方式。实现这用方法也比较多。这里列举几个。

1. 使用浮动实现自适应
2. 使用绝对定位实现
3. 使用flex布局实现
4. 使用table布局实现
5. 使用grid网格布实现

以上5个都可以实现中间自适应，两侧固定的三栏布局。

1、首先看第一个浮动实现的布局。

<section class="layout float">
      <style>
        .layout.float .left{
          float: left;
          width:300px;
          background: green;
        }
        .layout.float .right{
          float: right;
          width:300px;          
          background: blue;
        }
        .layout.float .center{
          background: red;
        }
      </style>
      <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">float中间自适应</div>
      </article>
    </section>

 2、第二个绝对定位的布局。    

<section class="layout absolute">
      <style>
        .layout.absolute .left-right-center > div{
          position: absolute;
        }
        .layout.absolute .left{
          left: 0;
          width:300px;
          background: green;
        }
        .layout.absolute .right{
          right: 0;
          width:300px;          
          background: blue;
        }
        .layout.absolute .center{
          right: 300px;
          left: 300px;
          background: red;
        }
      </style>
      <article class="left-right-center">
        <div class="left"></div>
        <div class="center">absolute中间自适应</div>
        <div class="right"></div>
      </article>
    </section>

 3、flex布局

<section class="layout flex">
 
      <style>        
        .layout.flex {
          margin-top: 120px;
        }
        .layout.flex .left-right-center{
          display: flex;
        }
        .layout.flex .left{
          width:300px;
          background: green;
        }
        .layout.flex .right{
          width:300px;          
          background: blue;
        }
        .layout.flex .center{
          flex: 1;
          background: red;
        }
      </style>
      <article class="left-right-center">
        <div class="left"></div>
        <div class="center">flex中间自适应</div>
        <div class="right"></div>
      </article>
    </section>

4、table表格布局

<section class="layout table">
      <style>         
        .layout.table .left-right-center{
          width: 100%;
          display: table;
        }
        .layout.table .left-right-center > div{
          display: table-cell;
          height: 100px;
        }
        .layout.table .left{
          width:300px;          
          background: green;
        }
        .layout.table .right{
          width:300px;          
          background: blue;
        }
        .layout.table .center{
          background: red;
        }
      </style>
      <article class="left-right-center">
        <div class="left"></div>
        <div class="center">table中间自适应</div>
        <div class="right"></div>
      </article>
    </section>

5、grid网格布局

<section class="layout absolute">
      <style>
        .layout.absolute .left-right-center > div{
          position: absolute;
        }
        .layout.absolute .left{
          left: 0;
          width:300px;
          background: green;
        }
        .layout.absolute .right{
          right: 0;
          width:300px;          
          background: blue;
        }
        .layout.absolute .center{
          right: 300px;
          left: 300px;
          background: red;
        }
      </style>
      <article class="left-right-center">
        <div class="left"></div>
        <div class="center">absolute中间自适应</div>
        <div class="right"></div>
      </article>
    </section>

五种布局的网格布局代码最少。但工作这段时间几乎没有用到过，大多用flex来开写。布局肯定是不止这些东西的，当然对这些每个人应该知道就好的，记住肯定好，但开发的并非是所所有的都会，只是了解的、看的比较多，在做的时候可以百度查一下就好，也算是自己上班来了解的。
续...
Grid布局。