实现双飞翼布局（圣杯布局）的三种方式

一、实现效果

为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，效果如图所示：

二、使用弹性盒模型display:flex实现

静态页面思路：设置一个大盒子，里面包含三个小盒子

// 静态页面搭建
<div class="box">
	<div class="left"></div>
	<div class="content">333333</div>
	<div class="right"></div>
</div>

原理：给最外面的盒子box添加弹性盒模型display：flex，让盒子在同一行显示；给左右盒子设置固定的宽高，则父元素的剩余宽度为中间盒子的宽度flex：1

// 样式实现
<style>
	* {
		margin: 0;
		padding: 0;
	}
	.box {
		display: flex;
	}
	.left,
	.right {
		width: 300px;
		height: 300px;
		background-color: gold;
	}
	.content {
		flex: 1;
		height: 300px;
		background-color: tomato;
}
</style>

三、使用calc属性实现

// 静态页面搭建
<div class="box">
	<div class="left"></div>
	<div class="content">333333</div>
	<div class="right"></div>
</div>

原理：给左中右三个盒子都添加左浮动，固定左右盒子的宽高，给中间盒子的宽设置calc属性，计算宽度为100%的宽度减去左右两边盒子的宽度

<style>
	* {
		margin: 0;
		padding: 0;
	}
	.left,
	.right {
		background-color: orange;
		float: left;
		width: 300px;
		height: 300px;
	}
	.content {
		background-color: green;
		float: left;
		height: 300px;
		width: calc(100% - 600px);
     }
</style>

四、使用绝对定位实现

// 静态页面搭建
<div class="box">
	<div class="left"></div>
	<div class="content">333333</div>
	<div class="right"></div>
</div>

原理：给左边盒子和右边盒子添加绝对定位并固定宽高，给box添加相对定位（子绝父相），左盒子：left:0，右盒子：right：0；定位不占位置，设置中间盒子的左右内边距padding为左右盒子的宽度

<style>
	* {
		margin: 0;
		padding: 0;
	}
	.box {
		position: relative;
	}
	.left,
	.right {
		position: absolute;
		top: 0;
		height: 300px;
		width: 300px;
		background-color: pink;
	}
	.left {
		left: 0;
	}
	.right {
		right: 0;
	}
	.content {
		height: 300px;
		background-color: red;
		padding: 0 300px;
	}