网页布局layout

网页常见的布局有一般一栏、两栏、三栏现在从一栏说起：

css:

<style type="text/css">

.container{background: #87cbe5;height: 700px;width:500px;/*margin:0px auto;*/margin-left: auto;margin-right: auto;}

</style>

大家都知道一框架居中margin:0px auto;和margin-left: auto;margin-right: auto;都是可以（大家可以看看bootstrap框架一般用的后免得方法）

html：

<div class="container"></div>

两栏：

css:

<style type="text/css">

*{margin:0;padding:0;}

html.body{margin:0;height:100%;}
.container{width: 100%;background: #87cbe5;height: 700px;/*margin:0px auto;*/margin-left: auto;margin-right: auto;}
.container-left{width: 20%;background: #b79be7;height: 600px;float: left;}
.container-right{width: 80%;background: #ff7d73;height: 600px;float: right;}

</style>

html:

<div class="container">
<div class="container-left"></div>
<div class="container-right"></div>
</div>

 

一般从学习的时候别人就跟我们说里面的框架container-left和container-right宽度和是不能大于外面container框架，的确是如此!然后我们每每都是小心翼翼的遵守，但是有没有想过大于它的话要怎么才能不会错位捏，这时候用到了margin-left属性可以设置为负值。.container-right改为下面

.container-right{width: 85%;background: #ff7d73;height: 600px;float: right;margin-left: -5%;}

那么我要做两栏右面不设置宽度呢：

<style type="text/css">

html,body{margin:0;height:100%;}
.con{height:100%;}
.left{position: absolute;top:0px;left:0px;width: 200px;height: 100%;background: #b79be7;}
.right{margin-left: 210px;background: #ff7d73;height: 100%;margin-right: 10px;}

</style>

html:
<div class="left"></div>
<div class="right"></div>

两栏第二种方法：

html,body{margin:0;height:100%;}
.con{height: 100%;margin-left: 200px;}
.left{float: left;width: 200px;height:100%;background: #b79be7;margin-left: -200px;}
.right{height:100%;background: #87cbe5;margin-left: 10px;}

 html:

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

 

三栏布局：（margin负值法以及自身浮动法，绝对定位法三种方法）

 上面两栏引出此方法margin负值法

<style type="text/css">

html,body{margin:0;height:100%;}
.main{width: 100%;height: 100%;float: left;}
.main .center{margin:0 210px;background: #87cbe5;height:100%;}
.left,.right{width: 200px;height:100%;float: left;background: #b79be7;}
.left{margin-left: -100%;}
.right{margin-left: -200px;}

</style>

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

第二种：

<style type="text/css">

html,body{margin:0;height:100%;}
.left,.right{position: absolute;top: 0px;width: 200px;height: 100%;}
.left{left:0;background: #b79be7;}
.right{right: 0;background: #ff7d73;}
.center{margin:0 210px;background: #87cbe5;height:100%;}

</style>

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

第三种：

 

<style type="text/css">

html,body{margin:0;height:100%;}
.center{height: 100%;margin:0 310px;background: #87cbe5;}
.left,.right{width: 300px;height:100%;background: #b79be7;}
.left{float: left;}
.right{float: right;}
</style>

 

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

关键的是把中间的放在最后