前端面试题目：页面布局

页面布局：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

有五种方式：

1.float方式

2.absolute方式

3.flex

4.table

5.网格grid

<!--float方法-->
<section id="float">
	<style type="text/css">
		#float{
			background: yellow;
			overflow: hidden;
		}
		#float .left-center-right .left{
			float: left;
			width: 300px;
			height: 100px;
			background: red;
		}
		#float .left-center-right .right{
			float: right;
			width: 300px;
			height: 100px;
			background: red;
		}
	</style>
	<article class="left-center-right">
		<div class="left"></div>
		<div class="center">
			
		</div>
		<div class="right"></div>
	</article>
</section>

<!--绝对定位方法-->
<section id="absolute">
	<style type="text/css">
		#absolute{
			position: relative;
			background: yellow;
			height: 100px;
		}
		#absolute .left-center-right .left{
			position: absolute;
			left: 0;
			top: 0;
			width: 300px;
			height: 100px;
			background: red;
		}
		#absolute .left-center-right .center{
			position: absolute;
			left: 300px;
			right: 300px;
		}
		#absolute .left-center-right .right{
			position: absolute;
			right: 0;
			top: 0;
			width: 300px;
			height: 100px;
			background: red;
		}
	</style>
	<article class="left-center-right">
		<div class="left"></div>
		<div class="center">
			
		</div>
		<div class="right"></div>
	</article>
</section>

<!--flexbox方法-->
<section id="flex">
	<style type="text/css">
		#flex .left-center-right{
			display: flex;
			background: yellow;
		}
		#flex .left-center-right .left{
			width: 300px;
			height: 100px;
			background: red;
		}
		#flex .left-center-right .center{
			flex: 1;
		}
		#flex .left-center-right .right{
			width: 300px;
			height: 100px;
			background: red;
		}
	</style>
	<article class="left-center-right">
		<div class="left"></div>
		<div class="center">
			
		</div>
		<div class="right"></div>
	</article>
</section>

<!--表格布局方法-->
<section id="table">
	<style type="text/css">
		#table .left-center-right{
			display: table;
			background: yellow;
			width: 100%;
		}
		#table .left-center-right div{
			display: table-cell;
		}
		#table .left-center-right .left{
			width: 300px;
			height: 100px;
			background: red;
		}
		#table .left-center-right .right{
			width: 300px;
			height: 100px;
			background: red;
		}
	</style>
	<article class="left-center-right">
		<div class="left"></div>
		<div class="center">
			
		</div>
		<div class="right"></div>
	</article>
</section>

<!--网格布局方法-->
<section id="grid">
	<style type="text/css">
		#grid .left-center-right{
			display: grid;
			background: yellow;
			width: 100%;
			grid-template-rows: 100px;
			grid-template-columns: 300px auto 300px;
			
		}
		#grid .left-center-right .left{
			background: red;
		}
		#grid .left-center-right .right{
			background: red;
		}
	</style>
	<article class="left-center-right">
		<div class="left"></div>
		<div class="center">
			
		</div>
		<div class="right"></div>
	</article>
</section>

还有一个点就是比较兼容性问题：

五种方法flex和table兼容性很好

而float和absolut则脱离文档流方式

grid是新的方法