H5移動前端完美佈局之padding

時間 2019-11-24

標籤 h5 移動前端完美佈局 padding 欄目無線简体版

原文原文鏈接

序
上次的提到了H5移動前端完美佈局之－margin百分比的使用margin-top（left,right,bottom）的百分比在移動頁面佈局中對上下左右距離的處理，攻下城外再攘城內,今天看看padding在頁面佈局中所發揮的的做用。html

背景

在平時的開發中咱們可能會遇到說一個150*150正方形的塊，或者一個button,這樣咱們就會發現兩個問題，若是用px寫死的話，那如何響應全部設備，2若是用百分比的話，寬度可控，那高度呢，今天咱們來探討下常常使用的padding在佈局中的強大做用這個方法的使用會讓你的移動前端佈局響應更靈活。前端

DEMOgit

實現github

跟以前的margin相似 margin是外邊距 padding是內邊距，咱們依然使用百分比，記住百分比都是相對於父級而言的，咱們先來個響應的正方形看看。
styleiphone

html,body{ width:100%;}
.rel     { position:relative} 

.f-child {  width:48%;
            height:0;
            padding-top:48%;
            background:#ddd;
         }

html佈局

<body>
    <div class="rel f-child"></div>
</body>

iphone5post

iphone6spa

能夠看出使用padding-top能夠實現正方形而且響應不一樣設備，爲何padding-top能夠呢，咱們能夠聯繫margin，margin是外邊距而padding是內邊距，padding是相對於自身的，當width爲body的48%；而padding-top的百分比也是相對於父級的寬度的(同margin) 因此padding-top:48%的高度就是body寬度的48%；因此f-child的width和padding-top都是body的48%； padding-top是相對自身撐開的因此widht==height 也就成了正方形，而且百分比響應。設計

以此類推 code

寬度大於高度

高度大於寬度

此刻咱們只是實現了本身想要的形狀，可是這個外殼裏面是要裝東西的，好比圖片，可是padding後佔有了內部空間，直接將圖片放進去的話，圖片會下沉，因此咱們要以下設置才能真正實現

<div class='rel f-child'>
    <img src="../statics/img/leinov.jpg" alt="">
</div>

因此咱們的用定位改變佈局流，讓圖片在咱們的外殼內顯示

html

<div class='rel f-child'>
    <div class="pabs w100 h100">
        <img src="../statics/img/leinov.jpg" alt="">
    </div>
</div>

style

.f-child{  
        width: 48%; 
        height: 0; 
        padding-top: 48%; 
        background: #ddd
    }
 .rel{ position: relative;}
 .pabs{ position: absolute; left: 0; top:0;}
 .w100{ width: 100%;}
 .h100{ height: 100%;}
 img{width: 100%;}

咱們將外層形狀的position設爲relative 內層再加一層div讓其position爲absolute,left:0,top:0 相對於父級絕對定位再將寬度高度設爲100%；徹底撐開到跟父級大小同樣，這樣就能夠在這樣一個內部的盒子裏放正方形的圖片了。當咱們拿到psd後測量寬高度再計算下百分比，配合以前的margin就能夠徹底實現設計稿而且響應了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。