序
上次的提到了H5移動前端完美布局之－margin百分比的使用margin-top（left,right,bottom）的百分比在移動頁面布局中對上下左右距離的處理，攻下城外再攘城內,今天看看padding在頁面布局中所發揮的的作用。
在 平時的開發中我們可能會遇到說一個150*150正方形的塊，或者一個button,這樣我們就會發現兩個問題，如果用px寫死的話，那如何響應所有設 備，2如果用百分比的話，寬度可控，那高度呢，今天我們來探討下經常使用的padding在布局中的強大作用 這個方法的使用會讓你的移動前端布局響應更靈活。
實現
跟之前的margin類似 margin是外邊距 padding是內邊距，我們依然使用百分比 ，記住百分比都是相對於父級而言的，我們先來個響應的正方形看看。
style
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>
iphone5
iphone6
可以看出使用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 也就成了正方形，並且百分比響應。
以此類推
寬度大於高度
高度大於寬度
此刻我們只是實現了自己想要的形狀，但是這個外殼里面是要裝東西的，比如圖片，但是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就可以完全實現設計稿並且響應了