前言

什么是三栏布局

三栏布局是一种网页设计布局，将页面内容分为三块，通常是左侧、中间和右侧，其中两侧部分宽度固定，中间部分宽度自适应，根据浏览器宽度撑满剩余空间。

其特点在于左右两列可固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化。

实现三栏布局的方式有很多种，但是实现三栏布局的同时需要实现主体内容优先加载，这就是我们需要解决的痛点。

实现三栏布局的几种方式

  <div class="page">
    <div class="left">广告位</div>
    <div class="content">主体内容</div>
    <div class="right">广告位</div>
  </div>

我们知道，如果是这样的结构，由于是块级元素，会形成三行。我们通过css有很多方法可以把他变成三列，但是由于代码是从上向下执行的，这种先天条件就决定了左边一栏优先加载，那么我们如何解决这个问题，让html优先加载主体内容？

毫无疑问，我们要改成这样

  <div class="page">
   <div class="content">主体内容</div>
    <div class="left">广告位</div>
   
    <div class="right">广告位</div>
  </div>

首先我们通过css渲染一下页面，让大家看看目前的状态

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

        .page {
            height: 200px;

        }

        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: #d71515;

        }

        .content {
            height: 200px;
            width: 100%;
            background-color: #140909;
        }
    </style>

效果：

但是这样就会使我们的html结构变成第一栏是主体，第二栏第三栏是广告位，现在需要解决的问题就是如何把主体内容居中。

圣杯布局

• 通过给page下的所有div子容器设置浮动，三行就会变成三列
• 给page设置内边距，为两边的广告位预留位置padding: 0 200px;
• 正常情况下，没有脱离文档流的情况下，以下效果合情合理

• (margin-left/right)设置-200px，左边广告位自然而然就会跑到上面去，右边广告位就接管左边广告位原来的位置

• 设置相对定位，移动自身的多少？让他去到最左边。

.left {
            position: relative;
            margin-left: -200px;
            left: -100%;
        }

• 那么右边也就同理了，只需要设置margin-right:-200px即可

.left {
            position: relative;
            margin-left: -200px;
            left: -100%;
        }

        .right {
            margin-right: -200px;
        }

双飞翼布局

对圣杯布局做了一些优化，使代码看上去更加的优雅

• 本身应该是主体内容自己做事情让自己先加载，在圣杯布局中却要求别人来margin...
• 因此双飞翼布局中在content容器中增加了inner容器，决定在自身上做文章

    <div class="content">
      <div class="inner">主体内容</div>
    </div>

• 依然，对page下的三个子容器div做浮动，让他们去一行
• 对inner容器设置左右外边距

.page>div {
            float: left;
        }

        .content {
            width: 100%;
            height: 200px;
            background-color: #100101;
        }

        .inner {
            margin: 0 200px;
            height: 200px;
            background-color: #cb8b8b;
        }

• 接着就和圣杯一样了，通过外边距的设置，让左右广告位归位

.left {
            margin-left: -100%;
        }

        .right {
            margin-right: -200px;
        }

flex布局（好用又便捷）

• 将page设置为弹性容器display:flex
• 将主体内容content容器设置flex-grow为1,表示自动分配空间
• 通过order来改变元素结构顺序，虽然html结构中左边容器写在主体容器后面（为了让主体内容优先加载），但是通过order可以改变html结构将左边order设置为0，主体为1，右边为2

.page {
            height: 200px;
            display: flex;
        }

        .left,
        .right {
            height: 200px;
            width: 200px;
            background-color: #ec0707;
        }

        .content {
            width: 100%;
            height: 200px;
            background-color: #100101;
            flex-grow: 1;
            order: 1;
        }

        .left {
            order: 0;
        }

        .right {
            order: 2;
        }

flex布局，通俗易懂，代码简洁优雅，非常推荐！

其他的“三栏布局”

事实上还有很多办法实现三栏布局，但是无法实现主体内容优先加载，因此不是真正意义上的三栏布局，但是同样很有必要介绍一下，因为他们的实现方式也非常优雅便捷。

表格布局

<div class="page">
    <div class="left">左</div>
    <div class="main">中间</div>
    <div class="right">右</div>
</div>

结构如上，但是main放在中间，无法实现main的优先加载。

* {
    margin: 0;
    padding: 0;
}
.page {
    width: 100vw;
    height: 200px;
}
.left,
.right {
    height: 200px;
    width: 200px;
    background-color: blue;
}
.main {
    width: 100%;
    height: 200px;
    background-color: red;
}

简单对上述结构进行渲染。

• 表格布局只需要将父容器display:table设置为表格特性
• display: table-cell;：让元素在同一行内排列；
• table-layout: fixed;：让列宽由元素自身的宽度决定。

* {
    margin: 0;
    padding: 0;
}
.page {
    width: 100vw;
    height: 200px;
}
.left,
.right {
    height: 200px;
    width: 200px;
    background-color: blue;
}
.main {
    width: 100%;
    height: 200px;
    background-color: red;
}
.page {
    width: 100vw;
    height: 200px;
    display: table;
    table-layout: fixed;
}

.page>div {
    display: table-cell;
}

两三行代码就实现了“三栏布局”，非常的简洁。

网格布局

结构还是和表格布局一样。

* {
    margin: 0;
    padding: 0;
}

.page {
    width: 100vw;
    height: 200px;
    display: grid;
    grid-template-columns: 200px auto 200px;
}

.left,
.right {
    height: 200px;
    background-color: blue;
}

.main {
    height: 200px;
    background-color: red;
}

大家可以看看，非常的通俗易懂，设置grid，然后设置我们想要的模板状态左边多少中间自动适应，右边多少，其他都不需要改变就实现了。

小结

如果在面试时遇到了面试官问你三栏布局如何实现，我相信看完本文你也能够对答如流了，甚至可以扩展一下内容，谈一谈表格布局和网格布局。曾几何时，flex布局刚出来虽然好用，但是很多浏览器都不支持，因此还是可以选择使用圣杯布局和双飞翼布局，但是现在时代迅猛发展，各大浏览器都能支持flex，因此，大胆用，勇敢冲。