CSS圣杯布局 && 双飞翼布局

两者作用和区别：

圣杯布局和双飞翼布局解决的问题都是一样的。两边固定宽度，中间自适应的三栏布局，已经由此演变出来的类似其他布局格式。中间布局代码要写在 前边，保证第一个渲染

区别：

两者在布局的前三点方法是一样的，通过float浮动，和margin-left负值，让三元素并排显示。行成三栏布局，区别在中间盒子处理的方式。怎么做才能不把中间盒子的内容覆盖住。让其完全显示。
圣杯布局是通过父元素设置padding-left和padding-right为左右两边的盒子留空间。然后左右两盒子通过相对定位，改变left和right的值。移动后不遮挡中间div
双飞翼布局是直接在中间div内部创建子div，用于放置内容。并且设置子div的margin-left和margin-right,为左右两个div留出位置，左右两个盒子不需要设置position:relative和right,left属性。个人感觉比圣杯布局要简单一些。具体操作参考下面代码

1，圣杯布局特点

（1）父元素包含三个元素，分别设置他们左浮动
（2）中间的盒子宽度设置为100%，自适应，并且在三个元素的最前面显示，第一个渲染
（3）左右两边使用margin-left的负值，使他们与中间的盒子同行，（左边：-100%，右边：-右边盒子的宽度）
（4）中间的盒子width:100%后，需要父元素通过padding设置左右两边空白，为左右两边的盒子留同等大小的空间
（5）设置左右两边position:relative,通过left移动位置

2，代码

	
		
		
		
	
	
		
上
	        

		   
中
		   
左
		   
右
		
 
		
下
	

效果截图

3，双飞翼布局：

  （1）（2）（3）同上
  （4）给中间元素设置子元素，并给其设置其margin-left 和 margin-right值，为左右盒子留位置

	
	
	


	
Header
	

		

			
我是中间
		
		
我是左边
		
我是右边
	
	
Footer

效果截图

http://note.youdao.com/noteshare?id=517bf7e02fddf13871a4b9f7cb0979e4&sub=5CC78C2A1E4C4C6F81EF1501177DA9E9