圣杯布局和双飞翼布局

一、圣杯布局

     解释： 是两边宽度固定，中间自适应的三栏布局。其中，中间栏放到文档流前面，保证先行渲染。

写作方法：

1、父级盒子设置高度和宽度（100%），为了留出中间位置，添加左右padding值（padding左右值即为左右栏宽度），为了取消补白区域影响，添加box-sizing；border-box

2、父级里三栏的位置，中间栏在前，然后左右

3、中间栏宽度100%

4、左侧宽度和padding-left一致，右侧和padding-right一致

5、使左侧、右侧内容在一行内显示，为他们添加定位（父相子绝）

下面上代码：

1、css代码

2、html代码：

 这是展示效果：

 二、双飞翼布局

解释：是两边固定，中间自适应的三栏布局。其中，中间栏放到文档流前面，保证先行渲染。

写作方法：

1、父级盒子设置高度和宽度

2、父级里三栏的位置，中间栏在前，然后左右

3、中间盒子宽度width：100%  且独占一行

4、三个盒子设置float：left；

5、使用margin-left属性将左右两边的盒子拉回与中间盒子同一行left{margin-left：-100%}；向左走一个父级盒子的宽度{margin-left：负的自身宽度}

6、中间主盒子里面的内容盒子设置左右margin，避免被遮挡内容

下面上代码：

1、css代码

2、html代码：

 这是展示效果（用了下测试代码）：

 三、双飞翼布局和圣杯布局的区别

 1、相同点

（1）两侧宽度固定，中间宽度自适应

（2）中间部分在结构上优先，以便先行渲染

（3）允许三列中的任意一列成为最高列

（4）只需要使用一个额外的div标签

2、不同点

（1）圣杯布局

        借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，就像同一个杯子，非主要元素器只是占据了全部容器的padding值部分

（2）双飞翼布局

        给主要内容部分的添加一个外层元素，其他非主要元素所占据的空间是主要部分的margin空间，就像鸟儿的一双翅膀