1、前端基础
盒子模型 位置（相对 绝对） 浏览器渲染顺序（从上而下，从外到里;如果里面有宽度则再从里而在，如div没有设置宽度则一直撑大到设置了宽度的div为止） 浮动
2、基础布局
中间固定两边自适应（就是居中了）
可用display:inline-block 和text-align:center
或者margin:0 auto来处理
两边固定中间自适应（从盒子模型入手理解）
可用左右两个固定浮动div加上中间有margin-left margin-right偏移的div即可
其他瀑布流布局 左右布局 左中右布局 上下布局 浮动布局
3、实际应用模块
应该注意的是除了最外面的框应该有确实的百分比或者宽度之外，内部的都不应该指定
都应该按照百分比开写，上面应为
<div >
<!--得先有一个padding的宽-->
<div style="padding:5px">
<img style="width:100%;display:block;" src="" />
<p style="height:4rem;font-size:2rem"></p>
<p>123</p>
</div>
</div>
上面利用的image设置百分比宽度，然后浏览器自动补高度的过程，（缺陷是1、加载时高度沦陷，而是不重要的图片在加载的时候第一时间加载，形成阻塞；如果background-image可以解决后加载问题，不过如果要实现延时加载用这个方式就要将样式写到页面上了）
第二种响应式的方式使用padding-top=(图片高度/图片宽度)*100%来设置，这样就可以用background-image来设置图片了。
如：
.figure {
padding-top: 30.85%; /* 316 / 1024 */
background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
background-size: cover;
background-position: center;
}
<div class="figure"></div>
注意4个，那么用百分比平分即可，里面的图片文字居中
4、应该注意的事情
div span 文字与图片
例如文字居中只要text-align指定即可 但是图片不行 图片用margin:0 auto来指定居中 div和span则两者都可以，区别在于如果用文字的方式，那么需要指定容器是像文字一样（display:inline-block），推荐用margin:0 auto
垂直居中需要用到display:inline-block verxxxalign:middle 父对象要指定line-hight 即可
文字的height与line-height的区别，怎么做到相等？
手机版本百分比和rem的适用情形
百分比只用于宽度的百分比，rem是一般用于文字大小和高度。
浮动要清除，要总结常用清除浮动方式代码