核心提示：圣杯与双飞翼布局代码总结1.圣杯布局定义： 圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体都是三栏全部float:left浮动，而在解决中间栏p的...
圣杯与双飞翼布局代码总结
1.圣杯布局
定义：
圣杯布局是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。解决方案大体都是三栏全部float:left浮动，而在解决中间栏p的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的。
代码如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shengbeibuju</title>
<style>
#hd{
height:50px;
background: yellow;
text-align: center;
}
#bd{
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
padding:0 200px 0 180px;
height:100px;
}
#middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:green;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
position:relative; /*一定要加定位*/
left:-180px;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:green;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
position:relative;
right:-200px;
}
#footer{
height:50px;
background: red;
text-align: center;
}
</style>
</head>
<body>
<p id="hd">header</p>
<p id="bd">
<p id="middle">middle</p>
<p id="left">left</p>
<p id="right">right</p>
</p>
<p id="footer">footer</p>
</body>
</html>
1.双飞翼布局
定义：
圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，双飞翼布局是在中间栏的p中嵌套一个p，内容写在嵌套的p里，然后对嵌套的p设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。
代码如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shuangfeiyi</title>
<style>
body{
padding:0;
margin:0
}
.header,.footer{
width:100%;
background: yellow;
height:70px;
clear:both;
}
.left{
background: green;
width:150px;
float:left;height:100px;
margin-left:-100%;
/*position: relative;*/ /*相对于圣杯布局而言，这里不用加定位*/
/*left:-150px;*/
}
.main{
background: blue;
width:100%;
height:100px;
float:left;
}
.right{
background: green;
width:190px;
float:left;
height:100px;
margin-left:-190px;
/*position:relative;*/
/*right:-190px;*/
}
.inner{
margin-left:150px;
margin-right:190px;
}
</style>
</head>
<body>
<p class="header">Header</p>
<p class="bd">
<p class="main">
<p class="inner"> <!-- 这里在中间的p中再嵌套一个p -->
内容
</p>
</p>
<p class="left">Left</p>
<p class="right">Right
</p>
</p>
<p class="footer">Footer</p>
</body>
</html>
