css3一些布局

布局：有头，有尾，有内容，middle部分要放在content的最前部分，然后是left，reight；
浮动让三者在一行，出现高度塌陷，content清浮动；
middle宽度设为100%，占满；
left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;
middle内容被left、right覆盖未显示，所以把middle内容拉回来，content:{padding: 0 200px};
此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来；
问题：
如果某一列内容过多，文字会溢出。解决方法：等高布局；
最小宽度问题：min-width:600px
———————————————

• 圣杯布局的要求：随着页面宽度的变化，三栏布局中的中间盒子优先自适应渲染，两边盒子宽度固定不变；
• 需求：
• 1.两边固定，中间自适应；
• 2.先加载middle内容；
• 3.三列等高布局；

• 步骤：
  布局：有头，有尾，有内容，middle部分要放在content的最前部分，然后是left，reight；
  浮动让三者在一行，出现高度塌陷，content清浮动；
  middle宽度设为100%，占满；
  left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;
  middle内容被left、right覆盖未显示，所以把middle内容拉回来，content:{padding: 0 200px};
  此时lefe和right都跟着被拉回来了，左右空出了200px。所以用相对定位把left,right拉回来；
  问题：
  如果某一列内容过多，文字会溢出。解决方法：等高布局；
  最小宽度问题：min-width:600px
  ————————————————
  
  

双飞翼布局
需求和圣杯布局是一样的；
据说双飞翼是玉伯大大提的，思路是：middle是鸟的身体，left和right是鸟的翅膀，先把主要的东西middle放好，再将翅膀移到合适的位置；
步骤
middle部分要放在content的最前部分，然后是left，reight；
浮动让三者在一行，出现高度塌陷，content清浮动；
middle宽度设为100%，占满；
left上去，拉到最左边：margin-left: -100%; right同理：margin-left:-200px;
以上，都和圣杯布局一样；
因为现在middle的内容被left和right覆盖了，我们除了考虑设置外围content的padding之外，还可以考虑用margin把middle拉过来；
在middle中加一个内部元素middle-inner，设置其margin:0 200px;
————————————————