两栏布局（左右布局）
左列定宽，右列自适应
- 方法1：
利用float+margin实现
.left{
float:left;
width:100px;
height:xxxpx;
}
.right{
margin-left:100px;
height:xxxpx;
}
<div>
<div class="left">左列定宽</div>
<div class="right">右列自适应</div>
</div>
- 方法2：flex布局
.parent{
display:flex
}
.left{
width:100px
}
.right{
flex:1
}
<div class="parent">
<div class="left">左列定宽</div>
<div class="right">右列自适应</div>
</div>
实现最左最右布局
第一种：父元素设置justify-content:flex-start ； 子元素设置 margin-left:auto
.box {
display: flex;
justify-content: flex-start;
}
.block2 {
margin-left:auto
}
第二种：父元素设置justify-content:flex-end ；子元素设置 margin-left:auto
.box {
display: flex;
justify-content: flex-end;
}
.block1 {
margin-right:auto
}
<div class="box">
<div class="block1">块1</div>
<div class="block2">块1</div>
</div>
三栏布局 (左右固定宽度，中间自适应)
- 方法1：flex布局
设置一个父div，添加样式display：flex。中间div设置flex：1， （flex是grow、shrink、basis的简写）通过项目属性flex-basis 设置left和right的固定宽度。
.main{
width:100%;
display:flex;
flex-direction:row;
justify-content:flex-start;
}
.left{
width:200px;
height:100%
}
.right{
width:200px;
height:100%
}
.middle{
flex: 1;
height:100%
}
<div class="main">
<div class="left">1111</div>
<div class="middle">2222</div>
<div class="right">33333</div>
</div>
- 方法2： 自身浮动法
自身浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。
该布局法的不足是三个元素的顺序，middle一定要放在最后，middle占据文档流位置，所以一定要放在最后。
.main{
width:100%;
height:200px;
}
.left{
float:left;
width:200px;
height:100%;
}
.right{
width:200px;
height:100%;
float:right;
}
.middle{
margin:0 200px;
height:100%
}
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
- 方法3： 使用绝对定位
绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的middle会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。 该法布局的好处，三个div顺序可以任意改变。
.main{
position:relative;
width:100%;
height:200px;
}
.left{
position:absolute;
width:200px;
height:100%;
}
.right{
position:absolute;
width:120px;
height:100%;
}
.middle{
margin:0 120px 0 200px;
height:100%
}
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
头尾固定高度中间高度自适应布局
要求：
1 头部固定高度，宽度100%自适应父容器；
2 底部固定高度，宽度100%自适应父容器；
3 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；
4 整个内容填满浏览器可视区域，并且不超出此区域！
- 绝对定位（position:absolute）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
html, body {
height:100%;
margin:0;
padding:0
}
header {
width:100%;
height:4rem;
line-height:4rem;
background:red;
position:absolute;
z-index:5;
top:0;
text-align:center;
}
#main {
background:pink;
width:100%;
overflow:auto;
top:4rem;
position:absolute;
z-index:10;
bottom:4rem;
}
footer {
height:4rem;
line-height:4rem;
background:yellow;
width:100%;
position:absolute;
z-index:200;
bottom:0;
text-align:center;
}
</style>
</head>
<body>
<header>固定头部4rem</header>
<div id="main">
<div class="mycontent">
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
中间自适应部分<br>
</div>
</div>
<footer>固定尾部4rem</footer>
</body>
</html>
- flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局实现</title>
<style type="text/css">
html,
body {
padding: 0;
margin: 0;
height: 100%;
/*定义页面整体高度为100%，重要*/
}
.container {
display: flex;
/*父元素的定义为flex布局*/
height: 100%;
/*这里也要定义，重要*/
width: 100%;
flex-direction: column;
/*定义排列方向为竖排*/
}
.header {
height: 100px;
/*头部固定高度*/
text-align: center;
background: red;
}
.footer {
height: 100px;
/*尾部固定高度*/
text-align: center;
background: yellow;
}
.main {
background: #ccc;
flex: 1;
/*中间分配剩下的所有空间*/
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="header">我是头部</div>
<div class="main">
我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br>
我是flex布局实现的中间自适应<br> // 无数个
</div>
<div class="footer">我是尾部</div>
</div>
</body>
</html>
