利用div+css实现几种经典布局的详解，样式以及代码！

一、左右两侧，左侧固定宽度200px，右侧自适应占满

html代码

<div class="divBox">
<div class="left"></div>
<div class="right"></div>
</div>

css代码

*{
margin: 0px;
padding: 0px;
}
.divBox{
height: 500px;
background: yellow;
}
.left{
float: left;
width: 200px;
height: 100%;
background: red;
}
.right{
margin-left: 200px;
background: green;
height: 100%;
}

这个实现起来比较的简单,左侧的div给浮动，右侧的divmargin-left使其从左侧div右侧开始展现,加背景颜色方便观察。

二、左中右三列，左右个200px固定，中间自适应占满

html代码

<div class="divBox">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>

css代码

*{
margin:0px;
padding: 0px;
}
.divBox{
background: yellow;
height: 500px;
}
.left{
background: red;
float: left;
width: 200px;
height: 100%;
}
.center{
/*第一种用浮动，加上左右外边距，不用绝对定位
这里我推荐把html中的right写在center的前面,如果按顺序写的话会把right挤到下面，感兴趣的可以自己试试
*/
/*margin: 0 200px;*/

/*第二种用浮动加绝对定位*/
/*position: absolute;
left: 200px;
right: 200px;*/

background: grey;
height: 500px;
}
.right{
background: green;
float: right;
width: 200px;
height: 100%;
}

三、上中下三行，头部200px高，底部200px高，中间自适应占满

html代码

<div class="divBox">
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</div>

css代码

*{
margin:0px;
padding: 0px;
}
.divBox{
background: yellow;
width: 100%;
}
.top{
background: red;
width: 100%;
height: 200px;
position: absolute;
top: 0;
}
.center{
width: 100%;
background: grey;
position: absolute;
top: 200px;
bottom: 200px;
}
.bottom{
width: 100%;
background: green;
height: 200px;
position: absolute;
bottom: 0;
}

这里用到了绝对定位，把上面的和下面的分别设置top:0,bottom:0 固定在上下两端，中间的距离上下200px即可。

四、上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走

html代码

<div class="divBox">
<div class="content"></div>
<div class="footer"></div>
</div>

css代码

*{
margin: 0px;
padding: 0px;
}
html{
height: 100%;
}
body{
min-height: 100%;
position: relative;
}
.content{
width: 100%;
background:red;
padding-bottom: 200px;
}
.footer{
width: 100%;
height: 200px;
background: green;
position: absolute;
bottom: 0;
}

固定footer在底部和把foorter往下挤着走都比较容易实现，但是合到一起，就不好弄了吧，其实也不难，更改content的高度，就可以看到效果了

必要的设置就是html要有高度,body的最小高度要有，footer是依照body进行绝对定位的，

了解了这些就不难实现了。

这些只是实现经典布局的一些方法，还有其他的方法，这里就不一一列出了。