一、简单布局
1、单栏布局 (jsbin.com/cifopah)
2、九宫格布局 (jsbin.com/dozeruk)
3、圣杯布局 (jsbin.com/kasujez/2/e…)
①是三列布局，两边固定宽度，中间自适应；
②中间内容元素在 dom 元素次序中优先位置；
③显著的缺点在于当边栏宽度大于主体部分宽度时，边栏会下移，发生位置错乱。
4、双飞翼布局 (jsbin.com/sewogat)
采用margin改变边距的方式解决了圣杯布局位置错乱的问题
5、单栏布局+双飞翼布局（jsbin.com/tibuleg）
二、居中实现方式
水平居中
CSS里实现水平居中非常容易，inline元素用text-align:center;，block元素用margin:auto;就行了。
demo：jsbin.com/rilukakobu
垂直居中
1、table-cell 居中
3、flex 居中
三、角标实现方式
1、 伪元素创建角标
未完待续...
备用地址：码云中，《布局demo》文件夹内。
