css布局总结
1.三列式‘圣杯布局’：思路 一个盒子了有三个子盒子都浮动起来，然后利用负边距把sub和extra 定位到main的左右，用定位属性实现！
圣杯布局的优点总结
如下：
1.使主要内容列先加载。
2.允许任何列是最高的。
3.没有额外的div。
4.需要的hack很少。
body{min-width:600px;//作当浏览器缩小到一定程度时，这个布局可能会被破坏，可以在body上添加min-width属性解决。最终的圣杯布局CSS代码如下：}
.con{padding-left:10%;padding-right:8%;}
.main{float:left;width:100%;height:200px;background:#C60;}
.sub{width:10%;height:200px;float:left;background:#06F;position: relative;left:-10%;margin-left: -100%;}
.extra{width:8%;height:200px;float:right;background:#0F6;position: relative;right:-8%;margin-left:-90%;}
<div class='con'>
<div class='main'></div>
<div class='sub'></div>
<div class='extra'></div>
</div>
/* 左侧栏固定宽度，右侧自适应 */
.bd-lft {zoom:1;overflow:hidden;padding-left:210px;}
.bd-lft .aside {
float:left; width:200px; margin-left:-100%;/*= -100%*/position:relative;
left:-210px;/* = -parantNode.paddingLeft */_left: 0;/*IE6 hack*/}
.bd-lft .main {float:left;width:100%;}
<div class='db-lft'>
<div class='main'></div>
<div class='aside'></div>
</div>
/* 右侧栏固定宽度，左侧自适应 */
.bd-rgt{
zoom:1;
overflow:hidden;
padding-right:210px;
}
.bd-rgt .main{
float:left;
width:100%;
}
.bd-rgt .aside{
float:left;
width:200px;
position:relative;
right:-210px;
margin-left:-200px;
}
/* 左中右 三栏自适应 */
.bd-3-lr {
zoom:1;
overflow:hidden;
padding-left:210px;
padding-right:210px;
}
.bd-3-lr .main {
float:left;
width:100%;
}
.bd-3-lr .aside-1 {
float:left;
width:200px;
margin-left: -100%;
position:relative;
left: -210px;
_left: 210px; /*IE6 hack*/
}
.bd-3-lr .aside-2 {
float: left;
width:200px;
margin-left: -200px;
position:relative;
right: -210px;
}
<div class='contaner'>
<div class='aside_1'></div>
<div class='main'></div>
<div class='aside_2'></div>
</div>
/* 都在右边，左侧自适应 */
.bd-3-rr {
zoom:1;
overflow:hidden;
padding-right:420px;
}
.bd-3-rr .main {
float:left;
width:100%;
}
.bd-3-rr .aside-1 {
float:left;
width:200px;
margin-left: -200px;
position:relative;
rightright: -210px;
}
.bd-3-rr .aside-2 {
float:left;
width:200px;
margin-left: -200px;
position:relative;
rightright: -420px;
}
