【学习笔记】（CSS布局）圣杯布局&双飞翼布局

在CSS布局中，圣杯布局与双飞翼布局按我个人的理解，其实解决的问题是基本一样的，都是在两边栏固定宽度，中间栏自适应宽度，然后中间栏的文本流放在框架的最前面，优先渲染，提高打开效率。
两者解决的方法也大体相同，三栏都采用了float:left浮动，不同点在于对于中间栏的遮挡处理方法。

• 圣杯布局的处理方法是对左、右两栏添加了相对定位，配合left、right属性，使用-margin值将左、右两栏调整好，并在中间栏div设定了padding-left值与padding-right值，使三栏并列，效果表现上是三栏单独分开的。
• 双飞燕布局的处理方法是中间栏div内嵌一个子div放置内容，然后对内嵌的子div设置好margin-left值与margin-right值为左右两、栏留出位置，使用-margin值将左、右两栏调整好，效果表现上是左、右两栏覆盖在中间栏上。

在视觉效果上，两者最终的界面都是一样的：

两者效果的对比图：（笔者找的网图，侵删）

圣杯布局的代码：
DOM结构：

<div class="header">Header内容区</div>`
<div class="container">
		<div class="middle">中间弹性区</div>  
		<div class="left">左边栏</div>  
		<div class="right">右边栏</div>
</div>
<div class="footer">Footer内容区</div>

CSS样式：

*{
	padding: 0px;
	margin: 0px;
}
.header{
	width: 100%;
	height: 40px;
	background-color: darkseagreen;
}
.container{ 
	height:200px;
	padding: 0 200px;      /*设定padding左右的值为左右两栏留出位置*/
}
.middle{
	width: 100%;		/*设置成100%是为了下面左右两栏可以使用-margin值*/
	height: 200px; 
	background-color: deeppink;
	float:left;
}
.left{ 
	width: 200px;
	height: 200px;
	background-color: blue;
	float:left;
	margin-left: -100%;		/*使三栏并列*/
	position: relative;
	left: -200px;   	/*通过相对定位的left恢复到正确的位置*/
}
.right{
	width: 200px;
	height: 200px;
	background-color: darkorchid;
	float:left;
	margin-left: -200px;	/*使三栏并列*/
	position: relative;
	right: -200px;		/*通过相对定位的right恢复到正确的位置*/
}
.footer{
	clear: both;
	width: 100%; 
	height: 30px;
	background-color: darkslategray;
}

双飞翼布局代码：
DOM架构：

<div class="header">header内容区</div>
	<div class="middle">
		<div class="inner">中间弹性区</div>  
	</div>
	<div class="left">左边栏</div>  
	<div class="right">右边栏</div>
	<div class="footer">footer内容区</div>

CSS样式：

*{
	padding: 0px;
	margin: 0px;
}
.header{
	width: 100%;	
	height: 40px;
	background-color: darkseagreen;
}
.middle{
	width: 100%;	/*使中间的Div宽度始终为100%*/
	height: 200px; 
	background-color: deeppink;
	float:left;
}
.left{ 
	width: 200px;
	height: 200px;
	background-color: blue;
	float:left;
	margin-left: -100%;		/*使三栏并列*/
}
.right{
	width: 200px;
	height: 200px;
	background-color: darkorchid;
	float:left;
	margin-left: -200px;	/*使三栏并列*/
}
.inner{		
	margin: 0 200px 0 200px;	/*为左右两栏腾出位置*/
	height: 100%;	
}
.footer{
	clear: both;	/*清除浮动*/
	width: 100%; 
	height: 30px;
	background-color: darkslategray;
}

学习小结： 先比较两种布局的优缺点：

个人在初次接触两种布局时觉得圣杯布局更容易理解学习，但在经过深入了解后又觉得圣杯布局的代码量较多且复杂，而且在某些情况下会出现排版混乱，导致投入调整的时间增大，在日后应该会使用双飞翼布局多一点。以上就是本人在学习圣杯布局与双飞燕布局过程中的一些认识，其中也有借鉴了其他网站的一些观点，如果有什么不足的地方，希望多多指教~