实现3栏布局，两边宽度是80px，中间的元素占满

页面效果如图所示，一共写了3种方式，1是利用flex布局 2是float布局 3是cacl计算属性

首先给三个父盒子宽，高

//三个父盒子
.flex1,.float1,.baifen{
    width: 100%;
    height: 100px;
    margin-top: 50px;
    background: black;
}

1.利用flex布局时 给整个父盒子加上display：flex    子盒子中左边的盒子和右边的盒子都给上宽度80px，中间的盒子给一个flex：1

//html代码
    <div class="flex1">
        <div class='flex1-l'></div>
        <div class='flex1-m'></div>
        <div class='flex1-r'></div>
    </div>

//css代码

.flex1{
    display: flex;
}
.flex1-l{
    width: 80px;
    background: tan;
}
.flex1-r{
    width: 80px;
    background: thistle;
}
.flex1-m{
    flex: 1;
    background: turquoise;
}

2.利用浮动布局，这个时候子盒子的顺序是左右中，中间的盒子距离左右各80px，注意需要给子盒子高度

//html代码


  <div class="float1">
        <div class="float1_l"></div>
        <div class="float1_r"></div>
        <div class="float1_m"></div>
    </div>

//css 代码

.float1_l{
    float: left;
    width: 80px;
    height: 100%;
    background-color: wheat;
}
.float1_r{
    float: right;
    width: 80px;
    height: 100%;
    background-color: whitesmoke;
}
.float1_m{
    margin-left: 80px;
    margin-right:80px;
    height: 100%;
    background: turquoise;
}

3.利用calc计算属性，首先三个子盒子是div，要给div一个inline-block转为行内块同行显示，利用calc计算中间盒子的宽度，

注意 1:这里会出现两个div之间有空隙，可以给父盒子加上一个font-size: 0；或者在代码中三个子盒子并排

         2:在使用calc的时候，里面的计算符号前后一定要加空格，否则会不生效

//html   给父盒子一个font-size:0

    <div class="baifen">
        <div class="baifen_l">
        </div><div class="baifen_m">
        </div><div class="baifen_r"></div>
    </div>

//css  

.baifen{
    font-size: 0
}
.baifen div{
    display: inline-block;
}
.baifen_l,.baifen_r{
    width: 80px;
    background: yellow;
    height: 100%;

    
}
.baifen_m{
    width: calc(100% - 160px);
    height: 100%;
    background: turquoise;
}

//html 子盒子并排显示

    <div class="baifen">
        <div class="baifen_l"></div><div class="baifen_m"></div><div class="baifen_r"></div>
    </div>

//css

.baifen div{
    display: inline-block;
}
.baifen_l,.baifen_r{
    width: 80px;
    background: yellow;
    height: 100%;
}
.baifen_m{
    width: calc(100% - 160px);
    height: 100%;
    background: turquoise;
}