逆战班：双飞翼布局和圣杯布局

	双飞翼和圣杯布局都是实现一个两侧固定，中间宽度自适应的三栏布局，而且希望浏览器解析结构的时候，优先渲染中间的结构而存在的一种布局

圣杯布局与双飞翼布局要求中间的自适应部分优先渲染的，所以结构要求：

<div class="center"></div>
<div class="left"></div>
<div class="right"></div>

在圣杯布局中

需要给三个盒子中套一个父元素box

<div class="box">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>

咱们先给left 样式width: 100px;height: 800px; float: left;
right样式width: 200px;height: 200px;float: left;
conten样式width: 100%;height: 400px;background: #87CEEB;float: left;
因为conten要求宽度自适应，所以width给予100%，当前布局显示为

我们先通过margin-left：将left、righ 两个div调到content的两边
将left ： margin-left: -100%; right ： margin-left: -200px;
此时的布局为

此时的conten 还与left跟right 相互重叠。
我们只需将最大的盒子box 添加声明：padding: 0 200px 0 100px;

然后通过 添加相对定位 将left和right 位置移动到两侧的空白处即可。
left ：position: relative; left: -100px;
right ：position: relative; left: 200px;
圣杯布局即可完成 而且三块div之间没有重叠的部分
效果图为

贴上代码：

.center{
			width: 100%;
			height: 400px;
			background: #87CEEB;
			float: left;
			
		}
.left{
			width: 100px;
			height: 800px;
			position: relative;
			float: left;
			background: #FFC0CB;
			margin-left: -100%;
			position: relative; 
			left: -100px;
		}
.right{
			width: 200px;
			height: 200px;
			float: left;
			position: relative;
			background: #7FFF00;
			margin-left: -200px;
			left: 200px;
		}
.box{
			padding: 0 200px 0 100px;
			border:  10px solid saddlebrown;
			overflow: hidden;
		}
		

在双飞燕布局中

看似是三块div 其实是四块 是由给center里面包了一个小盒子，小盒子给margin挤进去的
所以布局为

<div class="center">
	<div class="box"></div>
</div>
<div class="left"></div>
<div class="right"></div>

和圣杯一样 都给其加上最基本的样式
给left 样式width: 100px;height: 800px; float: left;
right样式width: 200px;height: 200px;float: left;
conten样式width: 100%;height: 400px;background: #87CEEB;float: left;
因为conten要求宽度自适应，所以width给予100%，当前布局显示为

并使用 margin-left：将left、righ 两个div调到content的两边
将left ： margin-left: -100%; right ： margin-left: -200px;

此时我们将content中的子元素box添加样式background: salmon;height:400px;
因为继承父元素content的width 100%所以 box的width也是100%
此时效果图为
所以我们只需要给box添加样式 margin: 0 200px 0 100px; 即可使子元素box与left和right不在重叠

只需要给box的父元素不添加背景色，或者透明色 ，即可使视觉效果显示为，三个块不重叠，且中间的块宽度自适应，但是 实际上在大块上，最大的中间是和左右重叠的

代码：

.center{
			width: 100%;
			height: 500px;
			float: left;
			/* background: #FFC0CB; */
		}
.right{
			float: left;
			width: 200px;
			height: 200px;
			background: darkorange;
			margin-left: -200px;
		}
.left{
			width: 100px;
			height: 300px;
			float: left;
			background: cornsilk;
			margin-left: -100%;
		}
.box{
			/* overflow: hidden; */
			background: salmon;
			height:400px;
			margin: 0 200px 0 100px;
		}