第六课《学习布局》-专题：理解圣杯布局和双飞翼布局
一、共性和差异
首先两个布局是有共性的：
- 实现效果一致：都是三栏布局，左右两列宽度固定，中间列宽度自适应。中间列放重要的内容，因此在DOM结构中位置靠前优先渲染。
- 实现原理一致：都是将一个
with：100%的浮动块和另外两个定宽浮动块通过负外边距和相对定位的方法实现最终布局，因此涉及到的方法包括：浮动、负外边距和相对定位
其次同样的实现效果之所以有两个名字，本质上是因为实现思路不一样，导致DOM结构不一样。
二、实现思路
圣杯布局来源于In Search of the Holy Grail这篇文章，作者在写DOM结构的思路是先写一个框架：
<header>header</header>
<div id="container"></div>
<footer>footer</footer>
框架效果：
因此在使用负外边距的方法将三个浮动块放到一行之后，还需要用相对定位将左右两个块放到最终位置。
双飞翼布局的思路是一个改良圣杯布局的过程，既然中间列需要布局，那就直接给它加个父元素，让这个父元素的width：100%，使用中间列的左右外边距(margin)确定位置，并留出左右空间，DOM结构如下：
<div id="container">
<div id="middle" class="basic">middle</div>
</div>
<div id="left" class="basic">left</div>
<div id="right" class="basic">right</div>
在这样的结构下，左右两列没有跟着被推到中间，因此只需要使用负外边距就可以实现最终布局。
三、完整代码
圣杯布局：
DOM结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<link rel="stylesheet" href="holygrail.css">
</head>
<body>
<header class="basic">header</header>
<div id="container">
<div id="middle" class="basic">middle</div>
<div id="left" class="basic">left</div>
<div id="right" class="basic">right</div>
</div>
<footer class="basic">footer</footer>
</body>
</html>
CSS样式：
body {
margin: 0;
}
.basic {
height: 50px;
text-align: center;
line-height: 50px;
}
header {
background-color: aquamarine;
}
footer {
clear: left;
background-color: burlywood;
}
#container {
padding: 0 150px 0 200px;
}
#middle {
float: left;
width: 100%;
background-color: chartreuse;
}
#left {
float: left;
position: relative;
right: 200px;
margin-left: -100%;
width: 200px;
background-color: hotpink;
}
#right {
float: left;
margin-right: -150px;
width: 150px;
background-color: silver;
}
双飞翼布局：
DOM结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<link rel="stylesheet" href="flying-wing.css">
</head>
<body>
<header class="basic">header</header>
<div id="container">
<div id="middle" class="basic">middle</div>
</div>
<div id="left" class="basic">left</div>
<div id="right" class="basic">right</div>
<footer class="basic">footer</footer>
</body>
</html>
CSS样式：
body {
margin: 0;
}
.basic {
height: 50px;
text-align: center;
line-height: 50px;
}
header {
background-color: aquamarine;
}
footer {
clear: left;
background-color: burlywood;
}
#container {
float: left;
width: 100%;
}
#middle {
margin: 0 150px 0 200px;
background-color: chartreuse;
}
#left {
float: left;
margin-left: -100%;
width: 200px;
background-color: hotpink;
}
#right {
float: left;
margin-left: -150px;
width: 150px;
background-color: silver;
}
