利用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进行绝对定位的，

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

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