一、css+div自适应布局
1.两栏布局（左定宽，右自动）
- float + margin
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>两栏布局（左定宽，右自动）</title>
<style>
body{
margin:0;
}
.box{
width:100%;
height:300px;
}
.left{
width:200px;
background-color:red;
height:300px;
float:left;
}
.right{
background-color:green;
height:300px;
margin-left:200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>效果图：
2.三列布局（两侧定宽，中间自适应）
- position+ margin
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>左中右三列左右200，中间自适应</title>
<style>
body{
margin:0;
}
.box{
width:100%;
height:300px;
position:relative;
}
.left{
width:200px;
background-color:red;
height:300px;
position:absolute;
top:0px;
left:0px;
}
.center{
background-color:black;
margin:0 210px;
height:300px;
}
.right{
width:200px;
background-color:green;
height:300px;
position:absolute;
top:0px;
right:0px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>效果图：
2.1三列布局（上下定宽，中间自适应）
- position + position
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>上中下三行上下200，中间自适应</title>
<style>
body{
margin:0;
}
.top{
width:100%;
height:200px;
background-color:red;
position:absolute;
top:0px;
}
.middle{
width:100%;
background-color:black;
position:absolute;
top:200px;
bottom:200px;
}
.bottom{
width:100%;
height:200px;
background-color:green;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</body>
</html>效果图:
3.上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走
- position + margin
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>上下两部分，底部固定高度200，如果上面内容少，底部固定，多的话挤着底部往下走</title>
<style>
html{
height:100%;
}
body{
min-height:100%;
position:relative;
margin:0;
background-color:red;
}
.header{
width:100%;
padding-bottom:200px;
}
.footer{
height:200px;
width:100%;
position:absolute;
bottom:0px;
background-color:#151515;
}
</style>
</head>
<body>
<div class="header">
你好，点个赞吧！<br/>
</div>
<div class="footer">
</div>
</body>
</html>效果图：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。