CSS布局集合

布局是CSS的一个重要部分，本文主要对CSS布局中常见的经典案例进行实现，涉及到Web端两栏式、三栏式布局及APP端布局

1、左列定宽，右列自适应

方法一：position + margin布局，外层容器设置相对定位，左侧容器设置相对定位及宽度，右侧容器设置左边距

.parent{position:  relative;}
.left{position:absolute;width:100px;}
.right{margin-left:100px;}

方法二：float + margin布局，左侧容器设置浮动，右侧容器设置左边距，外层容器清除浮动

.parent:after{
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}
.left{float:left;width:100px;}
.right{margin-left:100px;}

方法三：table布局，外层容器表现为Table，左右容器表现为table-cell

.parent{display:table;
table-layout:fixed;width:100%;}
.left{width:100px;}
.right,.left{display:table-cell;}

方法四：flex布局

.parent{  display: -webkit-flex;
  display: flex;}
.left{width:100px;}
.right{-webkit-flex: 1;flex: 1;}

2、右列定宽，左列自适应

方法一：position + margin布局，外层容器设置相对定位，右侧容器设置相对定位及宽度，左侧容器设置右边距

.left{margin-right:100px;}
.right{position:absolute;
width:100px;}

方法二：float + margin布局，右侧容器设置浮动，右侧容器设置负右边距，外层容器清除浮动

left{margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;}

方法三：table布局，外层容器表现为Table，左右容器表现为table-cell

.parent{display:table;
table-layout:fixed;width:100%;}
.right{width:100px;}
.right,.left{display:table-cell;}

方法四：flex布局

.parent{  display: -webkit-flex;
  display: flex;}
.left{-webkit-flex: 1;flex: 1;}
.right{width:100px;}

3、两列固定宽度

采用float进行布局，外层容器清楚浮动

.left{float:left;}
.right{float:right;}
 
.clearfix:after{
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;}

4、多列等分布局

方法一：float布局，每列左浮动

.parent{margin-left:-20px}
/*假设列之间的间距为20px*/
.column{float:left;width:25%;
padding-left:20px;
box-sizing:border-box;}

方法二：table布局，每列设置为table-cell

.parent-fix{margin-left:-20px;}
.parent{display:table;table-layout:fixed;width:100%;}
.column{display:table-cell;padding-left:20px;}

方法三：flex布局

.parent{display:flex;}
.column{flex:1;}
.column+.column{margin-left:20px;}

5、App端上下固定，中间滚动

<div class="wrapper flex flex-v">
	<div class="header"></div>
	<div class="main flex-item"></div>
	<div class="footer"></div>
</div>

方法一：使用fix定位上下容器

.header{
	position: fixed;
	width: 100%;
	height: 40px;
    top: 0;
	z-index: 10;
}
.main{
	padding: 40px 0 60px;
}
.footer{
	position: fixed;
	width: 100%;
	height: 60px;
	bottom: 0;
	z-index: 10;
}

方法二：使用flex布局，外层元素 display: flex;，滚动容器 flex: 1

.wrapper{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.flex-v {
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}
.flex {
    display: box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    box-flex: 1;
    flex: 1;
}
.main {
    padding: 0 10px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}