常见布局
垂直居中
vertical-align
我们都知道，每个人都有不同的嗜好，有的人喜欢吃甜食，有的人喜欢吃辣的东西，有的人不喜欢吃芹菜，有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。而vertical-align呢，是个比较挑食的家伙，它只喜欢吃果冻，从小吃果冻长大，没有了果冻，它就会闹脾气，对你不理不睬。我称之为“果冻依赖型元素”，又称之为“inline-block依赖型元素”，也就是说,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。
在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;
/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
两侧定宽，中栏自适应
利用float+margin实现
.left{width：100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}
利用table实现
.parent{width:100%;display:table;table-layout:fixed}
.left,.center,.right{display:table-cell;}
.left{width:100px;}
.right{width:100px;}
利用flex实现
.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}
圣杯布局
三个部分都设定为左浮动，然后设置 center 的宽度为 100%，此时，left 和 right 部分会跳到下一行；通过设置 margin-left 为负值让 left 和 right 部分回到与 center 部分同一行；
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.main {
padding-left: 300px;
padding-right: 300px;
}
.center {
float: left;
width: 100%;
height: 400px;
background: #4ba946;
}
.left {
float: left;
width: 300px;
height: 300px;
background: #0376c2;
margin-left: -100%;
position: relative;
left: -300px;
}
.right {
float: left;
width: 300px;
height: 300px;
background: #9889c1;
margin-left: -300px;
position: relative;
right: -300px;
}
</style>
</head>
<body>
<section class="main">
<div class="center">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</section>
</body>