本文已参与「新人创作礼」活动，一起开启掘金创作之路

圣杯布局

利用父容器的左右内边距+2个从列相对定位

双飞翼布局

中间又加一个盒子，利用盒子的左右外边距调整

中左右结构

因为要让中间的区域先加载渲染，所以让中间在最前面

	<div id="container">
		<div id="center" class="column">#center</div>
		<div id="left" class="column">#left</div>
		<div id="right" class="column">#right</div>
	</div>

父级容器留下左右内边距 中间100%，左右给挤下来了， margin-left:-100% 回到这行的开始 基于相对定位平移，自己的宽度

margin-right:-100% 回到这行的结束 把左右拉到同一行 右侧已经是最右边了

左右中结构

	<div id="container">
		<div id="left" class="column">#left</div>
		<div id="center" class="column">#center</div>
		<div id="right" class="column">#right</div>`在这里插入代码片`
	</div>

这个简单，同样父级留左右内边距 中间100%，左右margin 负自己的宽度

弹性盒子

container中的left、center、right依次排布即可 给container设置弹性布局 display: flex; left和right区域定宽，center设置 flex: 1; 即可

双飞翼布局结构

<div class="main">
		<div class="middle">
	 		<div class="content">
	 		中间
		 	</div>
		 </div>
		<div class="left">
			左边
		</div>
		<div class="right">
			右边
		</div>
	</div>

给中间设置左右外边距
 	.main>div{
	 	 float: left;
	 	}
	 	.left {
	 		width: 200px;
	 		background: red;
	 		margin-left: -100%;
	 	}
	 	.right{
	 		width: 200px;
	 		background: blue;
	 		margin-left: -200px;
	 	}
	 	.middle{
	 		width: 100%;
	 		background: yellow;
	 	}
 	.content{
	 		margin-left: 200px;
	 		margin-right: 200px;
	 	}

定位也可以实现