圣杯布局&双飞翼布局

圣杯布局布局和双飞翼布局：两侧宽度固定，中间宽度自适应的三栏布局，中间要放在文档流前面以优先渲染，允许三列中的任意列成为最高列

圣杯布局：

html代码

假设左侧固定宽度200px；右侧宽度200px；首先要在wrapper上设置，左右内边距200px；

左右边距格200px

随后分别设置三列宽度与浮动，

设置各列宽度 设置宽度和浮得到以下效果

本身wrapper是没有宽度的，center设置了100%宽度，支撑起来了父容器，达到了占满页面的效果

根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被挤到了第二排（左右两边有空白是由于父级设置了padding属性）

接下来要将left以及right放置到相应位置

使用负外边距 实现页面效果

设置margin-left：-100%的时候，left这个块会向左移动100%，这里的100%是父级宽度的100%,就正好到了父级的左边（center的宽度也是100%，正好充满父级的width，不包括padding，所以也到了center的左边）

同理，右侧添加left：-200px；向左移动了200px。也就是本省的宽度，到达父级的右侧

随后使用position：relative 定位到相应位置，添加左右 负 的 本身宽度的，偏移到浏览器窗口的最左边和最右边

使用position 最终页面效果

关于最小值的设置

设置整体的最小值需满足 min-width>=2x+y;其中x指左边块的宽度，y为右边块的宽度，所以最小值需要大于等于两个左边的块与一个右边的块的和，等于的时候就是临界值。

双飞翼布局

html代码 css代码

双飞翼布局与圣杯布局的区别是使用一个块将中间元素包裹，设置中间父元素width100%，内容元素设置margin：0 200；

按照与圣杯布局相同的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间