上一篇对布局做了简单介绍，在这节中加以补充
单列布局
一、水平居中
水平居中是页面布局中常用的布局方式，多出现于标题与主要内容。
1.inline-block和text-align
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
.parent{text-align:center;
}
.child{display:inline-block;
}
2.margin:0 auto;
.child{
width:200px;
height:100px;
margin:0 auto
}
使用这种方式需要设置其宽度
3.绝对定位与相对定位组合使用
.parent{
postion:relative;
}
.child{
position:absolute;
left:50%;
}
4.table实现
.child{
display:table;
margin:0 auto;
}
5.flex布局实现
.parent{
display:flex;
}
.child{
margin:0 auto;
}
二、垂直居中
1.vertical-align
.parent{
display:inline-block;
vertical-align:middle;
line-height:20px;
}
注：使用这种方式需给其元素设置inline-block;
2.绝对定位
这种方式基本跟水平居中类似
.parent{
position:relative;
}
.child{
position:absolute;
top:50%
transform:traslate(0,-50%)
}
多列布局
一、左列定宽，右列自适应
1.float+margin实现
.left{
float:left;
width:100px;
}
.right{
margin-left:
100px;
}
2.float+overflow实现
.left{
width:100px;
float:left;
}
.right{
overflow:hidden;
}
3.使用table实现
.parent{
display:table;
table-layout:fixed;
width:100%;
}
.left{
width:100px;
}
.right,.left{
display:table-cell;
}
二、右列定宽，左列自适应
1.使用float+margin实现
.parent{
height:100px;
margin:0 auto;
}
.left{
margin-right:-100px;
width:100%;
float:left;
}
.right{
float:right;
width:100px;
background:blue;
}
2.table实现
.parent{
display:table;
table-layout:fixed;
width:100%;
}
.left{
display:table-cell;
}
.right{
width:100px;
display:table-cell;
}
三、两列定宽，右列自适应
(最左边为left，中间为center，右边为right)
1.float+margin实现
.left,.center{
float:left;
width:200px;
}
.right{
margin-left:400px;
}
2.table实现
.parent{
display:table;
table-layout:fixed;
width:100%;
}
.left,.center,.right{
display:table-cell;
}
.left,.center{
width:200px;
}
3.float+overflow实现
.left,.center{
float:left;width:200px;
}
.right{
overflow:hidden;
}
四、两侧定宽，中间自适应
1.float+margin实现
.left{
width：100px;
float:left;
}
.center{
float:left;
width:100%;
margin-right:-200px;
}
.right{
width:100px;
float:right;
}
2.table实现
.parent{
width:100%;
display:table;
table-layout:fixed;
}
.left,.center,.right{
display:table-cell;
}
.left{
width:100px;
}
.right{
width:100px;
}
五、一列不定宽，一列自适应
1.float+overflow实现
.left{
float:left;
}
.right{
overflow:hidden;
}
2.table实现
.parent{
display:table;
table-layout:fixed;
width:100%;
}
.left{
width:0.1%;
}
.left,.right{
display:table-cell;
}
