1、前端基礎 盒子模型 位置（相對 絕對） 瀏覽器渲染順序（從上而下，從外到里;如果裡面有寬度則再從里而在，如div沒有設置寬度則一直撐大到設置了寬度的div為止） 浮動 2、基礎佈局 中間固定兩邊自適應（就是居中了） 可用display:inline-block 和text-align:cente ...
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是一般用於文字大小和高度。
浮動要清除，要總結常用清除浮動方式代碼
