前端實踐總結

一、前端基礎
盒子模型     位置(相對   絕對)  瀏覽器渲染順序(從上而下,從外到裏;若是裏面有寬度則再從裏而在,如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是通常用於文字大小和高度。
 
浮動要清除,要總結經常使用清除浮動方式代碼
 
 
 
 



相關文章
相關標籤/搜索