圣杯布局和双飞翼布局

两者都是三栏布局，两边的盒子宽度固定，中间盒子自适应

区别

1. 由下方代码可见，圣杯布局的中间部分middle放在左边区域left 右边区域right之前，由于中间部分在DOM上优先，以便于优先渲染。

2. 圣杯布局比双飞翼布局多使用了relative相对定位。

   圣杯布局是通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置。

   双飞翼布局是通过float+margin，没有使用相对定位。

3. 处理left区域和right区域

   圣杯布局是用padding与relative相对定位实现。通过给外部容器加padding，再通过相对定位把两边定位出来

   双飞翼布局是用中间区域middle套div与margin-left margin-right实现。

相同之处

1. 布局类似，都是实现特定需求的三列布局。

2. 都使用了float浮动向左脱离文档流,让左中右三列浮动，通过父外边距形成三列布局。

优缺点（相对）

• 圣杯布局

  • 优点

    dom结构相对简单。

  • 缺点 浏览器放大时（当 center < right 时），该布局将会变形。

• 双飞翼布局

  • 优点

    不会变形。

  • 缺点

    dom结构多了一层。

圣杯布局（固比固布局）

步骤

1. 先定义HTML结构

2. 开始布局，给这三个div都设置float: left，让它们均左浮动。

3. 设置左盒子的margin-left: -100%，把左盒子拉上来，调整左盒子的浮动位置到中间盒子的左侧。

4. 设置右盒子的margin-left: -右盒子宽度px，把右盒子拉上来，调整右盒子的浮动位置到中间盒子的右侧。

5. 经过上面的步骤之后，我们可以看到中间盒子的左右两侧会被左右两个盒子覆盖掉，此时我们要通过相对定位来避免覆盖。

   给左右盒子position: relative，再分别设置它们的left和right,并且控制父元素的padding来为左右两边留白。

相关代码

<header><h4>Header内容区</h4></header>
<div class="container">
    <div class="middle"><h4>...</h4></div>
    <div class="left"><h4>左边栏</h4></div>
    <div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>Footer内容区</h4></footer>

header{width: 100%;height: 40px;background-color: darkseagreen;}
.container{ height:200px;overflow:hidden;padding: 0 200px;}
.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}
.left{ width: 200px;height: 200px;background-color: blue;float:left;margin-left:-100%;position: relative; left: -200px;}
.right{width: 200px;height: 200px;background-color: darkorchid;float:left;margin-left:-200px;position: relative; right: -200px;}
footer{width: 100%; height: 30px;background-color: darkslategray;}
h4{margin-top: 0px;}

实现效果

双飞翼布局

步骤

1. 先定义HTML结构
2. 避免左右盒子被覆盖，是通过设置inner_middle的左右margin来实现的
3. 整个布局的左右padding留白有差异，通过设置父盒子的padding为左右留白的宽度就可以解决这个问题。

相关代码

<header><h4>Header内容区</h4></header>
<div class="container">
    <div class="middle"><h4>...</h4></div>
</div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
<div class="footer"><h4>Footer内容区</h4></div>

header{width: 100%;height: 40px;background-color: darkseagreen;}
.left{width:200px;height: 200px;background-color: blue;margin-left:-100%;float: left;}
.right{width:200px;height: 200px;background-color: darkorchid;margin-left:-200px;float: left;}
.container{width:100%;height:200px;float: left;}
.middle{height:100%;margin-left:200px;margin-right:200px;background-color: deeppink;}
.footer{height:30px;background-color: darkslategray;clear:both;width:100%}
h4{margin-top: 0px;}

实现效果