前端的三栏布局知识点

前端的三栏布局

之前学习了两栏布局，然后又了解到还有个三栏布局，学习了一下，感觉和两栏布局差不多，就是在右边多了个固定宽度的盒子，它基本上都是两边定宽，中间是自适应。

下面我们就一起来了解一下吧。

下面全部的实现效果都是如下：

1.浮动+margin

注意这里的 DOM 结构，不是我们想象那样的左中右结构，而是左右中结构，主要是给左右设置了浮动之后，就会脱离文档流，在最后是正常的文档流就很容易使用 margin 来控制。

首先我们给 .left 和 .right都分别加上 margin: left; 和 margin: right;，然后给 .main 添加上 marign: 0 200px;，这样就把它两边的距离空出来了，最终实现了三栏布局。

<style>
    .container div {
        height: 200px;
    }

    .left {
        float: left;
        width: 100px;
        background-color: orange;
    }

    .right {
        float: right;
        width: 100px;
        background-color: orange;
    }

    .main {
        margin: 0 100px;
        background-color: pink;
    }
</style>

<div class="container">
  <div class="left">左边内容</div>
  <div class="right">右边内容</div>
  <div class="main">中间内容</div>
</div>

2.浮动+BFC

这个方式和上面的差不多，只是把 margin: 0 200px; 换成了 overflow: hidden; 来开启了 BFC ，当然换成其他的方法来开启 BFC 也是可以的。具体的方法可以看看我之前的文档：BFC是什么？有什么作用？

<style>
    .container div {
        height: 200px;
    }

    .left {
        float: left;
        width: 100px;
        background-color: orange;
    }

    .right {
        float: right;
        width: 100px;
        background-color: orange;
    }

    .main {
        /* 开启了 BFC */
        overflow: hidden;
        background-color: pink;
    }
</style>

<div class="container">
    <div class="left">左边内容</div>
    <div class="right">右边内容</div>
    <div class="main">中间内容</div>
</div>

3.定位

这个方法也容易实现，在左右连个盒子上面设置了绝对定位，不过不要忘记了子绝父相，还要在 .container 上添加相对定位。

然后再利用 margin 让中间盒子把两遍的距离空出来。

<style>
    .container {
        position: relative;
    }

    .container div {
        height: 200px;
    }

    .left {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        background-color: orange;
    }

    .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
        background-color: orange;
    }

    .main {
        margin: 0 100px;
        background-color: pink;
    }
</style>

<div class="container">
    <div class="left">左边内容</div>
    <div class="right">右边内容</div>
    <div class="main">中间内容</div>
</div>

4.flex

这个就是开启了 flex 布局，也是非常简单的。

需要注意的是，这个的 DOM 结构是有点改变的，我们又恢复了左中右的结构，原因是开启了 flex 布局，容器里面的项目，就成主轴排列 (默认是水平)。

还有就是需要给自适应宽度，也就是咱们的 .main ，需要给它设置上 flex: 1;，以此来铺满剩余的空间。

<style>
    .container {
        display: flex;
    }

    .container div {
        height: 200px;
    }

    .left {
        width: 100px;
        background-color: orange;
    }

    .right {
        width: 100px;
        background-color: orange;
    }

    .main {
        flex: 1;
        background-color: pink;
    }
</style>

<div class="container">
    <div class="left">左边内容</div>
    <div class="main">中间内容</div>
    <div class="right">右边内容</div>
</div>

5.圣杯布局

后面的这两个就比较复杂了，首先圣杯布局我们先要将所有的子盒子设置为浮动，然后手动给中间元素设置宽度为100%，再设置 margin 属性将左右盒子放置到中间盒子上；

此时我们就可以设置 margin 值，来将整个大盒子向左和向右偏移 100px。

最后用定位的方式，分别把左右两个子盒子移动到两侧。

<style>
    .container {
        margin: 0 100px;
    }

    .container div {
        height: 200px;
    }

    .left {
        position: relative;
        left: -100px;
        top: 0;
        float: left;
        margin-left: -100%;
        width: 100px;
        background-color: orange;
    }

    .right {
        position: relative;
        right: -100px;
        top: 0;
        float: left;
        margin-left: -100px;
        width: 100px;
        background-color: orange;
    }

    .main {
        float: left;
        width: 100%;
        background-color: pink;
    }
</style>

<div class="container">
    <div class="main">中间内容</div>
    <div class="left">左边内容</div>
    <div class="right">右边内容</div>
</div>

6.双飞翼布局

双飞翼和圣杯布局类似，但是不完全一样，我们需要将自适应宽度的那个盒子嵌套在一个大盒子里面，这里用 .main 代指大盒子，然后把 .main 盒子和那两个固定宽度的盒子均设置为浮动，之后手动给 .main 盒子设置宽度为100%，再给那固定了宽度的盒子设置 margin 属性将其放置到 .main 盒子上；

这里就不是像圣杯布局那样通过定位移动左右盒子了，而是直接将 .main 盒子内部的子盒子添加上 margin 属性，而设置的值就是左右盒子的宽度。

<style>
    .container div {
        height: 200px;
    }

    .left {
        float: left;
        margin-left: -100%;
        width: 100px;
        background-color: orange;
    }

    .right {
        float: left;
        margin-left: -100px;
        width: 100px;
        background-color: orange;
    }

    .main {
        float: left;
        width: 100%;
    }

    .main div {
        margin: 0 100px;
        background-color: pink;
    }
</style>

<div class="container">
    <div class="main">
        <div>中间内容</div>
    </div>
    <div class="left">左边内容</div>
    <div class="right">右边内容</div>
</div>