H5移动前端完美布局之padding


上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局中对上下左右距离的处理,攻下城外再攘城内,今天看看padding在页面布局中所发挥的的作用。

背景

在 平时的开发中我们可能会遇到说一个150*150正方形的块,或者一个button,这样我们就会发现两个问题,如果用px写死的话,那如何响应所有设 备,2如果用百分比的话,宽度可控,那高度呢,今天我们来探讨下经常使用的padding在布局中的强大作用 这个方法的使用会让你的移动前端布局响应更灵活。

DEMO

H5移动前端完美布局之padding_第1张图片

实现

跟之前的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

H5移动前端完美布局之padding_第2张图片

iphone6

H5移动前端完美布局之padding_第3张图片

可以看出使用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 也就成了正方形,并且百分比响应。

以此类推

宽度大于高度

H5移动前端完美布局之padding_第4张图片

高度大于宽度

H5移动前端完美布局之padding_第5张图片

 

此刻我们只是实现了自己想要的形状,但是这个外壳里面是要装东西的,比如图片,但是padding后占有了内部空间,直接将图片放进去的话,图片会下沉,所以我们要如下设置才能真正实现

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

H5移动前端完美布局之padding_第6张图片

所以我们的用定位改变布局流,让图片在我们的外壳内显示

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%;}

H5移动前端完美布局之padding_第7张图片

我们将外层形状的position设为relative 内层再加一层div让其position为absolute,left:0,top:0 相对于父级绝对定位 再将宽度高度设为100%;完全撑开到跟父级大小一样,这样就可以在这样一个内部的盒子里放正方形的图片了。 当我们拿到psd后测量宽高度再计算下百分比,配合之前的margin就可以完全实现设计稿并且响应了

 详见padding-top用法

你可能感兴趣的:(H5移动前端完美布局之padding)