用双/三栏布局，带你更深刻了解css定位和布局

前言

在最近的面试中，css相关的知识简直是问烂了，今天就用一个比较常用的双栏和三栏布局来给各位萌新小白继续强化一下css中定位和布局的相关知识

正文

水平垂直居中

首先在我们谈论双栏布局和三栏布局之前还需要了解一个小小的知识点就是如何使元素水平垂直居中。常见的有以下几种

绝对定位

绝对定位可以说是相当常用的一种方法了，通过给元素设置绝对定位（position:absolute），距离左边50%（left：50%），距离顶部50% （top：50% ），最后再偏移回来自身的一半（transform: translate(-50%,-50%)）。有些小白可能不理解最后这一步是干什么的，这里举个例子就能很好理解了当然，如果居中的容器有固定的宽度，那么通过设置 margin负值也可以实现相同的功能

弹性容器

这一方法指的是将父容器设置为弹性容器，随后对里面的子元素进行弹性主轴居中（justify-content：center）和主轴交叉轴居中（align-item：center）。这里需要给各位小白说明一下什么是弹性主轴和主轴交叉轴。一般来说，当我们不设置弹性方向的时候，弹性主轴方向默认是x轴也就是横向，而主轴交叉轴就是Y轴。这个时候，内部的子容器就会去尽可能在水平方向上占满父容器。如此一来，我们通过两条轴的居中设置就可以实现元素的水平垂直居中

网格布局

通过网格布局实现的元素居中和弹性容器十分相似，唯一不同的地方是这里通过设置父容器为display：grid，之后再给子元素设置主轴居中（justify-content：center）和主轴交叉轴居中（align-item：center）

表格单元

将父容器设置为表格（display：table-cell）之后，再设置为 text-align：center（不是块级都能控制，包括inline-block等） + vertical-align：middle（控制表格内的元素在y轴居中）。不过需要强调的是子容器必须是非块级元素

Margin

这一步就相当不优雅了，强行计算距离然后再设外边距移过去，和设置为相对定位之后再left和top一样不优雅，这里不作推荐

双栏布局

对很多人，包括一些初学这来说，实现双栏布局并不难，无非就是flex或者float，不过这里有个小小的细节就在于，在多数情况下，页面的布局更倾向于定死一边的宽度，之后通过对另一个容器设置为浮动元素并margin来实现的。

三栏布局

很多人觉得这简直不要太简单，一个弹性布局之后再设置一下justify-content，这不就出来了吗？为什么要弃简从冗？但我今天要讲的主要是三栏布局中比较出名的方法：圣杯布局和双飞翼布局。

html 复制代码

        <div class="left">left</div>
        <div class="content">content</div>
        <div class="right">right</div>
        <!-- 常规flex布局 -->

html 复制代码

    <div class="wrap">
        <div class="content">content</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
        <!-- 圣杯布局 -->

其实从二者的html就可以看出来。由于从左往右这一特性，我们通过直接设置为flex来实现的话不得不从左到右写元素的html代码，但是在实际的用户体验中，以掘金的官网为例，我们需要让用户最先看到中间的内容，这个时候如果用的是常规flex，一旦出现用户网络差的情况，那么最左侧元素孤零零显示在页面上就很尴尬了。因此，我们需要通过圣杯布局或者双飞翼布局来让网页优先加载content的元素

圣杯布局

正如上面写的html代码一样，圣杯布局的一个特点在于必须用一个容器去容纳三个栏目实现的思路也很简单

第一步：给最外层容器设置左右内边距（宽度就是左右容器的宽度）和固定高度

css 复制代码

.wrap {
            padding: 0 200px 0 200px;
            height: 200px;
        }

第二步：让中间容器和左侧容器向左浮动，右侧容器向右浮动，给左右容器设置宽度，中间容器宽度为100%，所有容器高度100%

css 复制代码

.content {
            width: 100%;
            height: 100%;
            float: left;
            background-color: #bf1c1c;
        }

        .left {
            width: 200px;
            height: 100%;
            background-color: #b0d90a;
            float: left;
        }

        .right {
            width: 200px;
            height: 100%;
            background-color: #0cd095;
            float: right;
        }

做完这一步之后，页面会变成这个样子

需要特别注意的是，下面的两个容器之所以在下面，不是他们想，而是被硬挤过去的，毕竟红色容器给设置了宽度100%嘛，所以要是宽度足够的话，原本应该是这个样子的 3. 第三步：设置left容器

css 复制代码

    margin-left: -100%;
    position: relative;
    left: -200px;

left容器表示：既然你宽度不够给我硬挤下去了，而我又应该在你左边，那凭什么我不能硬挤回来呢？这一次，我要把我失去的，全都！拿回来！！说干就干，既然你给我挤到左边，那我就通过margin-left：100% 挤回来。但是令left蛋疼的是，宽度就这么宽，就算你的位置被margin-left 挤回去了，但高度不够你还在下面。left表示：我命由我不由天。直接设置相对定位，并把相对自己定位-200px定回去。这样一来，left就到达指定位置了

设置right容器 right看到left起义成功，自然也坐不住，既然你margin-left上位成功，那我也来一手，然后同样通过相对自身定位右移200px，这不就也上来了吗？

css 复制代码

 margin-left: -100%;
 right: -200px;
 position: relative;

至此，圣杯布局完美实现。

双飞翼布局

相对于圣杯布局，双飞翼布局要更简单一些，原理相似，区别在于对于left和right的处理，双飞翼布局是通过将两个容器全部向左浮动之后，通过margin-left来硬挤回去，不过content会提前设置内边距为left和right预留位置，而不是通过给最外层容器设置外边距，所以left和right能够硬挤回去，而不需要通过相对定位

css 复制代码

.wrap {

            height: 200px;


        }

        .info {
            background-color: #b3cf10;
            height: 100%;
            float: left;
            width: 100%;
            padding: 0 200px 0 200px;
            box-sizing: border-box;
        }

        .left {
            width: 200px;
            height: 100%;
            background-color: #640c0c;
            float: left;
            margin-left: -100%;
        }

        .right {
            height: 100%;
            width: 200px;
            background-color: #1230db;
            float: left;
            margin-left: -200px;
        }

总结

在这篇文章中我通过详细讲解CSS中的圣杯布局和双飞翼布局带各位浅浅复习了下CSS中关于定位和容器居中的问题，希望能够帮助到各位。