对圣杯布局和双飞翼布局的理解

一、概述
圣杯布局和双飞翼布局都是两边定宽中间自适应的布局，只是两者的Html结构不同。
二、圣杯布局
1、Html基本结构

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

2、CSS样式
2.1.首先给每个div设置宽度

#header{
    background-color: orange;
}
#left{
    width: 200px;
    background-color: sienna;
}
#center{
    width: 100%;
    background-color: sandybrown;
}
#right{
    width: 150px;
    background-color: seagreen;
}
#footer{
    background-color: salmon;
}

设置后的效果如图所示

2.2.需要在container中留出left和right的区域，添加CSS样式

#container{
	 padding-left: 200px;
	 padding-right: 150px;
}

效果如图所示

2.3.然后给它们添加浮动，并且把footer的浮动清除

#footer{
	background-color: salmon;
	clear: both;
}

.column{
   float: left;
}

效果如图所示
因为center的width:100%所以将left和right挤到了下一行，此时CSS认为center,left以及right之间是没有距离的
2.4.设置left的margin

#left{
    width: 200px;
    background-color: sienna;
    margin-left: -100%;
}

如图所示
将margin-left设置为-100%实质是将left向左移动了100%，正好center的width为100%，所以left被移动了如图所示的位置
2.5.设置right的margin

#right{
    width: 150px;
    background-color: seagreen;
    margin-right: -150px;
}

如图所示
将right的margin-right设置为-150px,此时CSS认为right的宽度为0，所以它后面的元素footer被提了上来,footer被提上去后，但设置margin不会影响right的实际宽度，所以right会被挤倒如图所示的位置
2.6.将left放在为它预留的位置

#left{
    width: 200px;
    background-color: sienna;
    margin-left: -100%;
    position: relative;
    right: 200px;
}

如图所示
position:relative和right:200px是指将left相对于现在的位置向左移动了200px,正好移到如图所示的位置
2.7.计算最小宽度
padding-left(200px)+padding-right(150px)+right(200px)=550px

body{
    min-width: 550px;
}

三、双飞翼布局
1、Html结构

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

2、CSS样式
2.1.先设置每个div的宽度

#header{
    background-color: sandybrown;
}
#container{
    width: 100%;
}
#center{
	 background-color: seagreen;
}
#left{
    width: 200px;
    background-color: salmon;
}
#right{
    width: 150px;
    background-color: red;
}
#footer{
    background-color: sienna;
}

如图所示

2.2.为left和right预留空间

#center{
    background-color: seagreen;
    margin-left: 200px;
    margin-right: 150px;
}

如图所示

2.3.将为它们设置浮动，并将footer的浮动清除

.column{
    float: left;
}
#footer{
    background-color: sienna;
    clear: both;
}

如图所示
设置浮动是为了让CSS认为container,left和right之间的距离为0，而此时container的宽度为100%
2.4.将left和right放入各自的位置

#left{
    width: 200px;
    background-color: salmon;
    margin-left: -100%;
}
#right{
    width: 150px;
    background-color: red;
    margin-left: -150px;
}

如图所示
设置left的margin-left为-100%s是将left向左移动-100%，即当前位置；
设置right的margin-left为-150px是将right向左移动150px,即当前位置
2.5.计算最小宽度
left(width=200px)+right(width=150px)=350px
这里我们还是设置它的最小宽度为550px

body{
    min-width: 550px;
}