三栏布局（固比固）的三种实现方式解析：怪异盒模型（border-box）、flex布局、calc()方法

概念

大概是长这个样子的布局:
一开始是这样的

我们来拉动一下窗口

可见，固比固指的是，左右两边尺寸固定，而中间会根据窗口大小缩放。

实现

①怪异盒模型实现

说起怪异盒模型我们就不得不得不先说一下box-sizing属性
box-sizing属性有两个常用的值：

(1)content-box

标准盒模型，是默认值
（所以图示的css中没有写
box-sizing：content-box）
计算公式：width = content
如果出现padding和border，视觉上的体积会扩张
接下来我们来看看图例：
只有content时：

加上padding：
明显粗了一圈

加上border：
又粗了一圈

所以标准盒模型就是一个向外扩张的类型

(2)border-box

怪异盒模型,
计算公式：
width = content + padding + border
从式子上可以看出，一旦width确定，其他三个只能作为变量调整
接下来我们看看图例:
只有content：
没什么区别

加上padding：
诶，还是原来的大小

加上border：
对比一下标准盒模型
总的体积依旧没有变化


所以怪异盒模型是向内压缩的类型

清楚了概念我们来谈一谈固比固布局的实现

   <h1>怪异盒模型实现</h1>
    <div class="box">     
        <div class="left">左边</div>
        <div class="center">中间</div>
        <div class="right">右边</div>
    </div>

    /* 怪异盒模型实现 */
    .box{
        width: 100%;
    }
    .left{
        background-color: yellow;
        position: absolute;
        left: 0;
    }
    .center{
        width: 100%;
        padding: 0 200px;
        background-color: pink;
        /* 怪异盒模型，内缩而不是外扩 */
        box-sizing: border-box;
    }
    .right{
        background-color: skyblue;
        position: absolute;
        right: 0;
    }

这里我们使center为怪异盒子，给它左右加上padding，这样一来正好为left和right提供了一块空间，最终实现固比固.

③calc（）方法实现

为什么①过了就是③？
主要是两者差不多所以放到一起讲，但是代码顺序上这又是第三个…（总结起来还是我太懒） 🤣~

calc是calculate（计算）的简写，效果也是顾名思义,需要强调一下两点：
(1)可以进行带单位的计算
(2)运算符两侧需要留空格，否则无法识别

既然和怪异盒模型的原理差不多，我们直接来看看实现：

    <h1>calc实现</h1>
    <div class="box3">         
        <div class="left3">左边3</div>
        <div class="center3">中间3</div>
        <div class="right3">右边3</div>
    </div>

    .box3{
        width: 100%;
    }
    .left3{
        background-color: yellow;
        position: absolute;
        left: 0;
    }
    .center3{
        width: calc(100% - 400px);
        /* 运算符 两边一定要留空 不然会无法识别 */
        padding: 0 200px;
        background-color: pink;
    }
    .right3{
        background-color: skyblue;
        position: absolute;
        right: 0;
    }

②flex实现

flex的内容比较多，我们这里就粗略地说一下

首先要给父级设置display:flex

子级设置flex属性，flex属性是
flex-grow flex-shrink flex-basis的集合，
默认值是
0， 1， auto

其中flex-gorw是指，

该元素在参与剩余分配空间时的占比，
如果只有一个元素参与分配剩余空间，那么不为0就是占满

(这里就不另外说明了，毕竟有太多质量不错的flex总结，举个例子，点击跳转)

来看看实现:

    <!-- flex实现 -->
    <h1>flex实现</h1>
    <div class="box2">         
        <div class="left2">左边2</div>
        <div class="center2">中间2</div>
        <div class="right2">右边2</div>
    </div>

    /* flex实现 */
    .box2{
        display: flex;
        width: 100%;
    }
    .left2{
        background-color: yellow;
    }
    .center2{
        width: 100%;
        background-color: pink;
        flex: 1;
    }
    .right2{
        background-color: skyblue;
    }

总结

从压缩窗口后的结果来看，还是flex最香，既没有发生错位也没有发生遮挡…

溜了溜了，再不跑就被大佬们喷死了