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

背景

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

DEMO

实现

跟之前的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就可以完全实现设计稿并且响应了

详见padding-top用法

H5移动前端完美布局之padding的更多相关文章

  1. H5移动前端完美布局之－margin百分比的使用

    一 ,背景 在移动端页面开发我们经常会遇到一件尴尬的事 我们所开发出来的页面跟设计师所给的页面差别很大 再加上移动设备屏幕的大小不一出来的效果更是参差不齐 然后.... 当然 现实情况没有这么糟糕.. ...

  2. H5横向三栏布局

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  3. 移动平台3G手机网站前端开发布局技巧

    本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博 您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相 关的文章,您或许 ...

  4. 移动平台3G手机网站前端开发布局技巧汇总

    移动平台3G手机网站前端开发布局技巧汇总 作者:前端开发-武方博   发布:2011-05-10 09:11   分类:移动开发   阅读:120,618 views   7条评论     您或许正在 ...

  5. Flexible实现H5页面的rem布局适配

    1.https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html (使用Flexible实现手淘H5页面的终端适配) 2.http ...

  6. H5纯前端生成Excel表格

    H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...

  7. 小程序支付及H5支付前端代码小结

    小程序支付和H5支付前端都不需要引入其他的js , 只需要后台将相关的参数 ( timeStamp: '', nonceStr: '', package: '', signType: 'MD5', p ...

  8. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  9. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

随机推荐

  1. Swift-3-字符串和字符

    // Playground - noun: a place where people can play import UIKit var someString = "some string ...

  2. 华农js抢课神器

    又到了华农选课的时候,服务器估计就受不了,每天奔溃几次,这次选课贪心了点,竟然选了5门,好吧,我承认我只中了1门,什么??刚刚换课给同学马上就被人抢了?我来告诉你原因吧,最近发现一位大神写了一份js脚 ...

  3. html5.js

    可以让IE8等不支持Html5的浏览器,支持Html5元素,比如<header> <footer> <section>等标签 /* HTML5 Shiv v3.7. ...

  4. spring mvc注解@RequestParam

    在spring mvc 的使用过程中 获取 页面传来的参数的时候,我平时都习惯  @RequestParam String name,突然有一天我发现 直接在方法参数后面写 String name , ...

  5. Codeforces Round #283 (Div. 2)

    A:暴力弄就好,怎么方便怎么来. B:我们知道最多加10次, 然后每次加1后我们求能移动的最小值,大概O(N)的效率. #include<bits/stdc++.h> using name ...

  6. （链接保存）CentOS 6.6下yum快速升级内核

    (因Docker建议3.8以上kernel版本)这个方法升级很方便,保存链接备用: http://www.dadclab.com/archives/5340.jiecao Docker Engine安 ...

  7. nodeJs入门篇之认识nodejs

    摘要:将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏览器就基于V8,同时打开 ...

  8. [你必须知道的.NET]第三十四回，object成员，不见了！

    发布日期:2009.10.30 作者:Anytao © 2009 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. 在.NET世界了,object是公认的造物主,其麾下的7大成员, ...

  9. lintcode:二叉树的路径和

    题目 给定一个二叉树,找出所有路径中各节点相加总和等于给定 目标值 的路径. 一个有效的路径,指的是从根节点到叶节点的路径. 解题 下面有个小bug 最后比较的时候是叶子节点为空,左右都有叶子结点,所 ...

  10. iOS 应用内付费（IAP）开发步骤

    折腾好几天,原来是税务信息没有填写,哎...  国内就是好啊,没有这些麻烦的事情...  :) 等24小时,等税务的审核结果...     有结论了 才能测试内购.... 如果税务信息没有填写完毕,p ...