弹性布局和设置百分比的宽高的布局

1.弹性布局（圣杯布局）

<div class="wapper">
			<div class="header"></div>
			<div class="contain">
				<div class="left"></div>
				<div class="center"></div>
				<div class="right"></div>
			</div>
			<div class="footer"></div>
		</div>

			*{
				margin: 0;
				padding: 0;
			}
			.wapper{
				width: 600px;
				height: 900px;
				margin: 10px auto;
				border: 1px solid;
				display: flex;
				//让盒子纵向排列
				flex-direction: column;
			}
			.header,.footer,.left,.right{
			//头部和底部，左和右的高度为20%
				flex: 0 0 20%;
				border: 1px solid green;
			}
			.contain{
				flex: 1 1 auto;
				/*flex-direction: row;*/
				display: flex;
			}
			//设置flex的值
			.center{
				flex: 1 1 auto;
			}
			.header{
			background-color:red
			}
			.footer{
				background-color:blue;
			}
			.left{
				background-color:green
			}
			.center{
				background-color:skyblue
			}
			.right{
				background-color:gray
			}

2.普通的宽高设置百分比

<div class="contain">
		<div class="head"></div>
		<div class="middle">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
		<div class="foot"></div>
	</div>

.contain{
			width: 700px;
			height:900px;
			/* background: ; */
			border: 1px solid red;
			margin: 0 auto;
		}
		.head{
			width: 100%;
			height: 20%;
			/* border: 1px solid green; */
			background-color: purple;
		}
		.middle{
			width: 100%;
			height: 60%;
			/* border: 1px solid green; */
		}
		.foot{
			width: 100%;
			height: 20%;
			/* border: 1px solid gray; */
			background-color: gray;
		}

		.left{
			width:20%;
			height:100%;
			background-color: green;
			float: left;
		}
		.center{
			width:60%;
			height:100%;
			background-color: skyblue;
			float: left;
		}
		.right{
			width:20%;
			height:100%;
			background-color: red;
			float: left;
		}