分析理解——圣杯布局和双飞翼布局

综述： 其实两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间部分在DOM结构上优先，以便先行渲染。（核心目的： 先解析中间栏，展示当前页面的核心内容，提升用户体验。）

圣杯布局： 的特点
1、结构上先解析center
2、三块之间没有重叠的部分
3、给最大的盒子添加了padding挤进去的 -->

 <div class="box">
			 <div class="center">中间的区域</div>
			 <div class="left">左边</div>
			 <div class="right">右边</div>
		 </div> 

.box{ border: 5px solid red; overflow: hidden;padding: 0 200px 0 100px;}
.left{ float: left;width: 100px;height: 200px;background: yellow;margin-left: -100%;position: relative; left: -100px;}
.right{ float: left;width: 200px;height: 300px;background: blue;margin-left: -200px;position: relative; right: -200px;}
.center{ float: left;height: 350px;background: green;width: 100%;}

分析说明： 按文档加载顺序一上来center最先解析，三块全部左浮动。center设置了100%宽度一上来是铺满浏览器。左右用margin是浮在center上的，接着用定位将左右盒子归到各自两边，此时center铺满浏览器的宽且覆盖着左右两边的盒子。center的父容器box内边距撑开自己，右边200px,右边的盒子露出来。左边100px,content右缩100px,左边的盒子露出来。此时center正好自适应显示在中间。(是一个动态的演化过程，建议手动测试理解记忆。)

页面效果

双飞翼布局： 的特点
1、结构上先解析center
2、3大块上，最大的中间是和左右重叠的
3、给center里面包了一个小盒子，小盒子给margin挤进去的

 <div  class="box">
		 <div class="center">
			 <div class="bg">中间的盒子</div>
		 </div>
		 <div class="left">左边</div>
		 <div class="right">右边</div>
	 </div>   
		 

.box{ border: 5px solid red; overflow: hidden;background:skyblue}
.left{ float: left;width: 100px;height: 200px;background: yellow;margin-left: -100%;}
.right{ float: left;width: 200px;height: 300px;background: blue;margin-left: -200px;}
.center{ float: left;height: 350px;width: 100%; background:black;}
.bg{height: 320px;background: white;margin: 0 200px 0 100px;}

分析说明： 同样的center最先解析，三块全浮动。center设置了100%宽度一上来是铺满浏览器的。左右用外边距margin重新归位浏览器左右是覆盖在center上的，center的子元素bg用外边距margin左、右撑自己正好到左右盒子的正中间，此时它为中心内容显示区，裸露在你眼前,同样也完成了自适应的目的。

页面效果