注意： 代码里面都有比较详细的注释
项目代码全部已经上传至 码云 和 Github，两个仓库我会同步更新

码云 git 下载地址：git@gitee.com:gorit/Coding-with-Front-end.git
Github git 下载地址：git@github.com:CodingGorit/Coding-with-Front-end.git

一、垂直居中

有父容器和子容器，实现子容器在父容器中的居中效果

布局效果：
常见 css 布局整理_git

二、等分布局

实现一行元素，在等高，等宽的情况下，在游览器汇总均匀排布

布局效果
常见 css 布局整理_html_02

三、等高布局

两列在同一级的 div 元素，实现等高等宽效果

布局效果
常见 css 布局整理_css_03

四、多列布局

多列布局实现 （等宽，非等宽，有间隙）

布局效果
常见 css 布局整理_html_04

自适应的效果不方便展示，可以在代码中查看

五、局中布局（垂直居中）

两个 div 元素，小盒子在 大盒子上下，左右都在中间

常见 css 布局整理_git_05

六、全屏布局

常见的 header，body， foot 的主流界面布局效果

常见 css 布局整理_多列_06

七、三列布局

三列元素分摊 width

常见 css 布局整理_git_07

八、圣杯布局

头 + 尾布局

布局效果
常见 css 布局整理_git_08

九、双飞翼布局

left + item + right （left = right）

布局效果
常见 css 布局整理_html_09

十、水平居中

元素在水平内部居中效果实现

布局效果
常见 css 布局整理_git_10

十一、css 布局特别整理

11.1 快速制作一行底部导航栏

html

<div class="page"><!-- 页码的制作 -->
	<a href="#">首页</a><a href="#">&lt;</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">...</a><a href="#">&gt;</a><a href="#">末页</a>
</div>

css

.page {
	height: 40px;
	margin-top: 10px;
	text-align: center;
}

.page a {
	/* 内联元素 和 块级元素的特性都有 */
	display: inline-block;
	border: 1px solid #E8E8E8;
	text-decoration: none;
	margin: 5px;
	padding: 5px 10px;
}

.page a:link, .page a:visited {
	color: #000;
}

.page a:hover,.page a:active {
	color: #FFF;
	background-color: #cc1b1b;
}

实现效果：
常见 css 布局整理_css_11