圣杯布局和双飞翼布局

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局均是上中下结构，其中，中间部分又分为左中右三部分，左右两侧宽度固定，中间部分宽度自适应；上中下的结构比较简单，使用三个div就可以实现，中间部分的左右两侧内容宽度固定，中间内容宽度自适应，实现起来就比较有技巧性，具体如下：

1、圣杯布局：

圣杯布局的html结构：

<div class="container">
    <div class="header">header</div>
    <div class="main">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>

圣杯布局中比较重要的就是中间部分样式的设置：

1、让左、中、右均浮动，（浮动会造成父元素高度坍塌，注意清除浮动带来的影响）

.center, .left, .right{
	float: left;
}
// 父元素解决浮动导致的高度坍塌
.main{
    overflow: hidden;
}

2、左右两侧宽度固定，中间宽度设置为100%，（方便观察效果，为左中右设置最小高度）

.left, .right{
    width: 200px;
}
.center{
    width: 100%;
}
.center, .left, .right{
    min-height: 500px;
}

3、由于中间宽度100%，左中右均浮动，所以左右两侧会在换行显示，为了让左右两侧与中间部分在一行，分别为左右两侧分别设置负地margin值，对于左侧：margin-left: -100%;（margin值为百分比时，其值是相对于父元素的宽度来计算的），对于右侧：margin-left: 负的右侧宽度;，这样一来，左中右三部分就处于同一行了

.left{
    margin-left: -100%;
}
.right{
    margin-left: -200px;
}

4、这个时候会存在一个问题：就是左右两侧会覆盖住中间部分的内容，为了解决这个问题，需要给父元素设置padidng，左右padding的值分别为左右两侧的宽度

.main{
    padding: 0 200px;
}

5、父元素设置完后padding后，页面中左右两侧会出现空白，这时候通过相对定位以及left、right属性分别将左右两侧移动到空白处，至此圣杯布局的中间部分就完成了！！！

.left{
    position: relative;
    left: -200px;
}
.right{
    position: relative;
    right: -200px;
}

2、双飞翼布局：

双飞翼的html结构：

<div class="container">
    <div class="header">header</div>
    <div class="main">
        <div class="center">
        	<!-- 添加一个子标签来显示中间内容 -->
            <div class="content">center</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>

双飞翼中间部分样式的设置：

1、让左、中、右均浮动，（浮动会造成父元素高度坍塌，注意清除浮动带来的影响）

.center, .left, .right{
	float: left;
}
// 父元素解决浮动导致的高度坍塌
.main{
    overflow: hidden;
}

2、左右两侧宽度固定，中间宽度设置为100%，（方便观察效果，为左中右设置最小高度）

.left, .right{
    width: 200px;
}
.center{
    width: 100%;
}
.center, .content, .left, .right{
    min-height: 500px;
}

3、由于中间宽度100%，左中右均浮动，所以左右两侧会在换行显示，为了让左右两侧与中间部分在一行，分别为左右两侧分别设置负地margin值，对于左侧：margin-left: -100%;（margin值为百分比时，其值是相对于父元素的宽度来计算的），对于右侧：margin-left: 负的右侧宽度;，这样一来，左中右三部分就处于同一行了

.left{
    margin-left: -100%;
}
.right{
    margin-left: -200px;
}

4、这个时候会存在一个问题：就是左右两侧会覆盖住中间部分的内容，为了解决这个问题，双飞翼通过为中间部分添加一个子元素，为子元素设置margin来防止中间内容被覆盖，至此双飞翼布局的中间部分就完成了！！！

.content{
    margin: 0 200px;
}

从上面的实现过程中可以看出：双飞翼布局与圣杯布局有相似之处，也有不同之处，相似之处在于也是让中间的左中右三部分浮动，并通过负的margin值让左右两侧与中间部分处于一行；不同之处在于在解决中间内容被左右两侧覆盖时，圣杯布局通过向父元素添加padding和利用左右两侧的相对定位来处理，双飞翼则是通过为中间部分添加一个子标签，通过设置子标签的margin值来处理中间内容被覆盖；

3、flex实现圣杯布局：

上面的是利用css2方式来实现的，下面给出一个利用css3的flex弹性布局来实现的圣杯布局：

html结构：

<div class="container">
    <div class="header">header</div>
    <div class="main">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>

css样式：

.container{
    display: flex;
    // 定义主轴为竖直方向
    flex-direction: column;
}
.header, .footer{
	// 上下结构高度固定
    flex: 0 0 80px;
}
.main{
	// 中间部分设置display为flex
    display: flex;
    flex: 0 0 auto;
}
.left, .right, .center{
	// 中间部分设置最低高度
    min-height: 500px;
}
.left, .right{
	// 左右两侧宽度固定
    flex: 0 0 200px;
}
.left{
	// 通过设置order将左侧部分排列靠前
    order: -1;
}
.center{
	// 中间内容宽度自适应
    flex: 1 1 auto;
}

参考文献：

[1] 圣杯和双飞翼布局介绍