布局：flex布局、单列布局、多列布局、九宫格布局、全屏布局、响应式布局

一. flex布局：

1. https://philipwalton.github.io/solved-by-flexbox/

2. 阮一峰的博客：

　　flex布局教程-语法篇： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

　　flex布局教程-实例篇： http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

 PS: 2017.3.23以上完成。

 

二. 单列布局、多列布局、九宫格布局、全屏布局、响应式布局

1. 单列布局：水平居中、垂直居中、水平垂直居中

2. 多列布局：

（1）. 左列定宽，右列自适应

（2）. 右列定宽，左列自适应

（3）. 两列定宽，一列自适应

（4）. 两列定宽，中间自适应

（5）. 一列不定宽，一列自适应

（6）. 多列等分布局

3. 九宫格布局

4. 全屏布局

5. 响应式布局

地址：http://www.360doc.com/content/15/1201/22/16000345_517268963.shtml

 

三. 学习CSS布局

地址：http://zh.learnlayout.com/display.html

移动端固定定位兼容性的解决方案：http://bradfrost.com/blog/mobile/fixed-position/

如何清除浮动：http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use

使用了媒体查询的页面：https://mediaqueri.es/

媒体查询MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

meta viewport： https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/

使得IE6、IE7支持inline-block：https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

flexbox：如何分辨一篇关于flexbox的文章是否过时：https://css-tricks.com/old-flexbox-and-new-flexbox/

　　　　最新标准：https://bocoup.com/blog/dive-into-flexbox/

那些CSS框架：http://zh.learnlayout.com/frameworks.html