0. 常用CSS

// flex快速布局
display: flex; 
// 方向为横向
flex-direction: row;
// 方向为竖向
flex-direction: column; 
// 使内部组件均匀分布
justify-content: space-between; 
// 设置组件层级，以面向我方向为正方向
z-index: 2; 
// 设置图片模糊
filter: blur(2px); 
// 设置圆角，50%为圆形
border-radius: 8PX;
// 字体加粗
font-weight: bold;
// 设置一行的高度(一般跟随height)
line-height: 40PX;
// 向上平移，正值为向下平移
transform: translateY(-50%);

注意

1. 内联元素不能设置宽高（display: line)
2. 设置浮动和绝对定位后会使该元素脱离文档流

1. 居中布局

1.1 水平居中

提供三种解决方案，推荐使用 margin + block

<div class="parent">
	<div class="child">Hello Pibigstar</div>
</div>

1.1.1 line-block + text-align

<style>
	.parent { display: line-block; }
	.child { text-align: center; }
</style>

1.1.2 block + margin

<style>
	.parent { position: relative; }
	/* 使用 table 和 block 都可以 */
	.child { display: table; margin: 0 auto; }
</style>

margin: 外边距

• 一个值： 上右下左
• 二个值： 第一个表示上下， 第二个表示左右
• 三个值： 第一个表示上，第二个表示左右，第三个表示下
• 四个值： 第一个表示上，第二个表示右，第三个下，第四个左

1.1.3 absolute + transform

<style>
	.child { position: absolute; left: 50%; transform: translateX(-50%); }
</style>

1.2 垂直居中

提供两种解决方案

<div class="parent">
	<div class="child">Hello Pibigstar</div>
</div>
<style>
.parent {
	width: 200px;
	height: 100%;
	background: #ccc;
}
.child{
	width: 200px;
	height: 100px;
	background: #c9394a;
	display: block;
}
</style>

1.2.1 table-cell + vertical-align

<style>
.parent {
	display: table-cell; 
	vertical-align: middle; 
}
</style>

1.2.2 absolute + transform

<style>
.parent { position: relative; }
.child{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
</style>

1.3 居中布局

1.3.1 table + margin

<style>
	.parent { display: table-cell; vertical-align: middle; }
	.child { display: table; margin: 0 auto; }
</style>

1.3.2 absolute + transform

<style>
.parent { position: relative; }
.child{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
</style>

2. 多列布局

2.1 两列布局

左边定宽，右边自适应，推荐 flex + flex-direction 和 float + overflow

<div class="parent">
	<div class="left">左: 定宽</div>
	<div class="right">右: 自适应</div>
</div>

<style>
.left{
	width: 100px;
	height: 300px;
	background: #c9394a;
}
.right {
	height: 300px;
	background: #ccc;
}
</style>

2.1.1 flex + flex-direction

<style>
.parent {
	display: flex; 
	flex-direction: row;
}
.left{
	width: 100px;
	background: #c9394a;
}
.right {
	width: 100%;
	background: #ccc;
}
</style>

2.1.2 float + overflow

<style>
.left{
	float: left;
}
.right {
	overflow: hidden;
}
</style>

2.1.3 float + margin

<style>
.left{
	float: left;
}
.right {
	margin-left 100px;
}
</style>

2.1.4 fixed + table

<style>
.parent {
	width: 100%;
	display: table;
	table-layout: fixed;
}
.left{
	width: 100px;
	display: table-cell;
}
.right {
	display: table-cell;
}
</style>

2.2 圣杯布局

<div class="parent">
	<div class="top"></div>
	<div class="center">
		<div class="left"></div>
		<div class="middle"></div>
		<div class="right"></div>
	</div>
	<div class="bottom"></div>

</div>

<style>
.parent {
	display: flex; 
	flex-direction: column;
	justify-content: space-between; 
}
.top {
	height: 100px;
	background-color: red;
}

.center {
	display: flex; 
	flex-direction: row;
	justify-content: space-between; 
	height: 450px;
	margin-top: 30px;
	margin-bottom: 30px;
	margin-left: 10px;
}

.left {
	background-color: green;
	width: 300px;
	height: 450px;
}
.middle {
	background-color: green;
	width: 800px;
	height: 450px;
}
.right {
	background-color: green;
	width: 300px;
	height: 450px;
}

.bottom {
	height: 100px;
	background: #ccc;
}
</style>

2.3 等分布局

<div class="parent">
	<div class="col1"></div>
	<div class="col2"></div>
	<div class="col3"></div>
	<div class="col4"></div>
</div>

2.3.1 float + width百分比

.col1,.col2,.col3,.col4 {
	float: left;
	width: 25%;
	height: 100px;
}

2.3.2 table + table-cell

.parent {
	width: 100%;
	display: table;
}
.col1,.col2,.col3,.col4 {
	display: table-cell;
	height: 100px;
	
}