双飞翼布局和圣杯布局

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"/>
 5 <title>双飞翼</title>
 6 <style>
 7     div {
 8         min-height: 300px;
 9         display:block;
10     }
11     .div {
12         width: 100%;
13         background-color: blue;
14         margin:0 auto;
15     }
16     .main {
17         width:100%;
18         background:red;
19         float:left;　　　　　　/* 先定主体 */
20     }
21     .left {
22         float:left;
23         background:yellow;
24         margin-left:-100%;　　/* 关键！ 确定左边翅膀 */
25         width:300px;
26     }
27     .right {
28         float:left;
29         background: yellow;
30         width: 200px;
31         margin-left:-200px;　　/* 关键！ 确定右边翅膀 */
32     }
33     .mainframe {  　　　　　　　/* 关键！ 因主体被挡住，因此需要 两边留出空白，把主体内容聚在中间集中显示 */
34         margin-left: 300px;
35         margin-right: 200px;  
36     }
37 </style>
38 </head>
39 <body>
40     <div class="div">
41         <div class="main">
42             <div class="mainframe">
43                 这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容这是主体内容
44             </div>
45         </div>
46         <div class="left">这是左边内容</div>
47         <div class="right">这是右边内容</div>
48     </div>
49 </body>
50 </html>

双飞翼布局的思路是

　　先把整个布局的 “主体” 确定好

　　然后再确定 “翅膀” 的位置

　　最后根据 “翅膀” 的大小，给 “主体” 部分两边留白。

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>圣杯</title>
<style>
	div {
		min-height: 300px;
		display: block;
	}
	.div {
		margin: 0 auto;
		padding: 0 200px 0 300px;　　/* 防止左右两边挡住内容 */
	}
	.main,.left,.right {
		float: left;
		position: relative;　　　　　　/* 后面需要用到 left */
	}
	.main {
		100%;
		background-color: red;
	}
	.left {
		 300px;
		background-color: yellow;
		margin-left: -100%;　　　　　　/* 移动到主体的左边部分 */
		left: -300px;　　　　　　　　　　/* 使用相对定位, 将左边部分移动到父框架的 左边 padding 部分 */
	}
	.right {
		 200px;
		background-color: yellow;
		margin-left: -200px;　　　　　　/* 移动到主体的右边部分 */
		right: -200px;　　　　　　　　　　/* 使用相对定位，讲右边部分移动到父框架的 右边 padding 部分 */

	}
</style>
</head>
<body>
	<div class="div">
		<div class="main">
			这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子
		</div>
		<div class="left">这是左边内容</div>
		<div class="right">这是右边内容</div>
	</div>
</body>
</html>

圣杯布局的思路是

　　先左右两边框利用 margin-left 移动到相应的位置

　　然后利用主体的padding 部分给左右两边框留白

　　接着左右两边框利用 relative 的 left 和 right 移动到留白的部分

双飞翼布局和圣杯布局的优点在于

　　1、自适应布局，两边的宽度确定好后，主体部分可以随着窗口的变化而变化

　　2、主体部分在 HTML文档里在 “翅膀” 部分的前面，浏览器会优先加载重要的主体部分，加载完毕再去加载次要部分。

两者都采用了 margin-left 来定位左右边框，只是对主体的遮挡部分处理的方式不一样。

双飞翼布局是采用了添加一个子框架,然后利用子框架的 margin-left 和margin-right 将内容从遮挡处移出来；

而圣杯布局则采用了主体部分的 padding ,利用该属性给两边留白,然后左右部分则采用 relative 的left 和right 移出主体部分,

移到主体部分的 padding区域。