页面效果如图所示，一共写了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代码//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代码//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//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 子盒子并排显示//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;
}【实现3栏布局，两边宽度是80px，中间的元素占满】
