一、前端基礎
盒子模型 位置(相對 絕對) 瀏覽器渲染順序(從上而下,從外到裏;若是裏面有寬度則再從裏而在,如div沒有設置寬度則一直撐大到設置了寬度的div爲止) 浮動
二、基礎佈局
中間固定兩邊自適應(就是居中了)
可用display:inline-block 和text-align:center
或者margin:0 auto來處理
兩邊固定中間自適應(從盒子模型入手理解)
可用左右兩個固定浮動div加上中間有margin-left margin-right偏移的div便可
其餘瀑布流佈局 左右佈局 左中右佈局 上下佈局 浮動佈局
三、實際應用模塊
應該注意的是除了最外面的框應該有確實的百分比或者寬度以外,內部的都不該該指定
都應該按照百分比開寫,上面應爲
<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設置百分比寬度,而後瀏覽器自動補高度的過程,(缺陷是一、加載時高度淪陷,而是不重要的圖片在加載的時候第一時間加載,造成阻塞;若是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個,那麼用百分比平分便可,裏面的圖片文字居中
四、應該注意的事情
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是通常用於文字大小和高度。
浮動要清除,要總結經常使用清除浮動方式代碼