前言
上篇文章给大家介绍了一些css系列的考题：前端面试必考八股文之------css系列（1），本文介绍的也是八股文中css常考的一道题，也是很多人回答不清楚的一道题，尤其是其中的三栏布局，如果你还没开始面试即将准备春招，那么看完这篇文章你将受益匪浅。
两栏布局
两栏布局，顾名思义就是页面一共分为两栏，其中一栏的宽度固定不变，另一栏的宽度根据屏幕大小自适应，效果如下。实现两栏布局的方法有三种
1. flex
设置父容器为弹性布局flex，固定左边子容器的宽度，右边子容器flex设为1即可。
css
<style>
.wrap{
display: flex;
height: 200px;
}
.left{
width: 200px;
height: 100%;
background-color: aqua;
}
.right{
flex: 1;
height: 100%;
background-color: antiquewhite;
}
</style>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>2. grid
设置父容器为网格布局，然后设置grid-template-columns属性为200px 1fr，表示网格布局一共两栏，左边宽度为200px，右边高度自适应。
css
<style>
.wrap{
display: grid;
grid-template-columns: 200px 1fr;
height: 200px;
}
.left{
width: 200px;
height: 100%;
background-color: aqua;
}
.right{
height: 100%;
background-color: antiquewhite;
}
</style>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>3. 浮动
给左边的子容器设置向左浮动float: left，右边的子容器设置margin-left: 200px，因为设置浮动会脱离文档流，所以如果不设置margin-left两个容器会重叠到一起去，右边容器不用设置宽度，因为块级元素默认占一整行。
css
<style>
.wrap{
height: 200px;
}
.left{
width: 200px;
height: 100%;
background-color: aqua;
float: left;
}
.right{
height: 100%;
margin-left: 200px;
background-color: antiquewhite;
}
</style>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>三栏布局
两栏布局比较简单，三栏布局才是面试中最难的地方，三栏布局是左右两栏宽度固定，中间部分的宽度自适应，三栏布局这里面还涉及到两个非常经典的布局方法，圣杯布局和双飞翼布局，三栏布局同样可以使用flex和grid这两种方法，思想和两栏布局一样，这里就不再赘述，这里主要讲剩下两种方法。
1. 圣杯布局
这里主要用到的是float + margin负值 + position: relative，这里我们先加载中间的内容部分，父容器设置了padding，把左右两栏的位置给空了出来，因为块级元素默认占据一整行，所以左右两栏就掉到了第二行，利用浮动和margin负值让子容器跑到上一行，这样就实现了三栏布局
css
.wrap{
height: 200px;
padding: 0 200px;
}
.left{
width: 200px;
height: 100%;
background-color: aqua;
float: left;
position: relative;
right: 200px;
margin-left: -100%;
}
.content{
background-color:crimson;
height: 100%;
width: 100%;
float: left;
}
.right{
width: 200px;
height: 100%;
background-color: antiquewhite;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>2. 双飞翼布局
这种布局方式主要用到的是float + margin负值，这里我们给中间的内容部分再包裹上一层，把padding设在了中间内容部分包裹的容器上，这样实际上content容器还是占据了一整行，但是中间的内容只有我们看到的部分，然后左右两栏浮动上去和content的左右两端发生重叠，这样就在视觉上形成了三栏布局。
css
<style>
.wrap{
height: 200px;
}
.left{
width: 200px;
height: 100%;
background-color: aqua;
float: left;
margin-left: -100%;
}
.container{
background-color:crimson;
height: 100%;
padding: 0 200px;
float: left;
width: 100%;
box-sizing: border-box;
}
.right{
width: 200px;
height: 100%;
background-color: antiquewhite;
float: left;
margin-left: -200px;
}
</style>
<body>
<div class="wrap">
<div class="container">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>圣杯布局和双飞翼布局都是两种非常经典的布局方式，它们都是选择先加载中间的内容部分，最后加载两侧内容，形象的概括就是先看内容再看广告，你是不是联想到了一些网站上面先弹广告后出现内容的情况呢。
结语
分栏布局属性八股文中css系列的考题之一，但是难度却比一般的考题难一些，所以单独成文，后续还会给大家继续分享面试题，创作不易，如果大家觉得这篇文章对你有帮助，就动动手点个赞，谢谢大家