去年在面试前端工程师的时候，问到了我一个问题-->用css实现一个三栏布局，你能写出几种，听到几种的时候，我就是一头污水，心里想会一个就行呗，哈哈，废话不多说直接上代码。
- 第一种：绝对定位
.fater{
position:relative; //父元素设置绝对定位
min-height:100px; //设置最小高度
}
.item{
height:100px; // 给每个元素设置高度，要不看不见
position:absolute; //每个子元素相对于父元素进行绝对定位
}
.left{
left:0; // 左面第一个元素靠在最左面
width:200px;
background-color:black;
}
.center{
left:200px; // 因为左面的元素宽度是200px，距离左面200px
right:150px; // 右面的元素宽度是150px，距离有面150px
background-color:blue;
// 肯定会有小伙伴会问，这个也没有设置宽度，他能显示出来吗，会的，因为块盒会默认撑开的。
}
.right{
right:0; // 因为是最右面的元素，所以要距离右面0px
width:150px;
background-color:red;
}
<div class="father">
<div class="item left"></div>
<div class="item center"></div>
<div class="item right"></div>
</div>
- 第二种 浮动的方式 注意：.center元素要最后渲染
.item{
height:100px; //给每一个元素设置100px的高度
}
.left{
float:left; //向左侧进行浮动
width:200px;
background-color:black;
}
.center{
margin:0 150px 0 200px;这是一个简写 margin的顺序是 top right bottom left
background-color:blue;
}
.right{
float:right; //向右侧进行浮动
width:150px;
background-color:red;
}
<div class="item left"></div>
<div class="item right"></div>
<div class="item center"></div>
为什么要强调 .center的元素要最后渲染呢，因为具有class类名为 .center的元素没有设置宽度，.center 元素单独占一行，margin-left:200px; margin-right:150px;中间剩余的就是他的宽度，如果.center不最后渲染而是在.right元素之前渲染就会导致.right元素会被挤到下一行，不会形成三栏布局的效果
非正常效果如图。
正常效果如图
- 第三种 弹性盒子
.item{
height:100px;
}
.father{
display:flex; //将父元素设置为弹性盒子
}
.left{
width:200px;
background-color:blue;
}
.center{
flex:1;
// flex 其实是一个复合属性 flex:1 也可以分开写成flex-grow放大比例，flex-shrink缩小比例
background-color:black;
}
.right{
width:200px;
background-color:red
}
喜欢就点个赞吧👍
