1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>padding-bottom布局</title>
  6.      <style>
  7.          #q{width:800px; height:700px; background:#f45;}
  8.          #c{width:400px; height:350px; padding-bottom:50%; background:#00f}
  9.          .out{width:100%;height:300px;background:#f45;}
  10.          .a,.b{width:50%;background:#00f;padding-bottom: 10%;
  11.              float: left;}
  12.  
  13.      </style>
  14.  </head>
  15.  <body>
  16.  <div id="q">
  17.      <div id="c">
  18.          SKJFLDKLKSAL;
  19.      </div>
  20.  </div>
  21.  
  22.  <!--  padding-bottom的百分比的值是按照父元素宽度的值计算的 #q的宽度为800,c的padding-bottom值为50%;浏览器
  23.  解析后的值为400px;
  24.  一般的用法是父元素设置一个宽度，子元素设置自己的padding-bottom按百分比，
  25.  这种布局方法适用于这样一个情景；一个元素的背景需要全部显示出来，并且比例不变；随着屏幕大小变化；
  26.  要求本元素不会变形始终维持一个比例；通俗的讲就是让一个元素铺上背景，达到图片的显示效果;
  27.  1、一个元素的宽度值是父元素宽度值的百分比；
  28.  2、此元素通过设置padding-bottom的百分比，使其达到本元素的高度，按照父元素的宽度的值来计算；
  29.  -->
  30.  <script src="http://libs.useso.com/js/jquery/1.8.3/jquery.js"></script>
  31.  <script>
  32.  
  33.  </script>
  34.  </body>
  35.  </html>

padding-bottom布局解析；的更多相关文章

  1. xml布局解析报错的可能原因

    xml布局解析报如下的错11-15 16:55:21.425 17633-17633/com.hongfans.mobileconnect I/LogUtils_info: [CrashHandler ...

  2. 从LayoutInflater分析XML布局解析成View的树形结构的过程

    上一篇博客分析了XML布局怎么载入到Activity上.不了解的能够參考 从setContentView方法分析Android载入布局流程 上一篇博客仅仅是分析了怎么讲XML布局加入到 Activit ...

  3. bootstrap-----流体布局解析

    流体布局容器 容器的width为auto,只是两边加了15px的padding. 流体布局容器 容器的width为auto,只是两边加了15px的padding. <div class=&quo ...

  4. MVC视图展现模式之移动布局解析-续集

    网站就必须用响应式布局吗?MVC视图展现模式之移动布局:http://www.cnblogs.com/dunitian/p/5213787.html demo:http://pan.baidu.com ...

  5. Android布局解析，图文(转)

    LinearLayout:相当于Java GUI中的FlowLayout(流式布局),就是说一个组件后边跟一个,挨着靠,一个组件把一行占满了,就靠到下一行. linearlayoutdemo.xml ...

  6. bootsrap-----固定布局解析

    <div class="container"> container </div> .container { .container-fixed();容器的wi ...

  7. Flutter 布局（二）- Padding、Align、Center详解

    本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets ...

  8. H5移动前端完美布局之padding

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

  9. Android自定义ViewGroup（四、打造自己的布局容器）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51500304 本文出自:[openXu的博客] 目录: 简单实现水平排列效果 自定义Layo ...

随机推荐

  1. 浅析C++内存分配与释放操作过程——三种方式可以分配内存new operator， operator new，placement new

    引言:C++中总共有三种方式可以分配内存,new operator, operator new,placement new. 一,new operator 这就是我们最常使用的 new 操作符.查看汇 ...

  2. poj2924---高斯求和

    #include <stdio.h> #include <stdlib.h> int main() { ; long long ans,a,b; scanf("%d& ...

  3. Hibernate 多表关联映射- Hibernate中使用的集合类型(set,list,array,bag,map)

    Set类型的使用: <hibernate-mapping package="cn.model"> <class name="Department&quo ...

  4. <memory> is not a BOMStorage file

    解决 Autoresizing 和AutoLayout 冲突 设置 self.autoresizingMask = UIViewAutoresizingNone;

  5. javascript高级知识点——临时作用域

    代码信息来自于http://ejohn.org/apps/learn/. 自执行,临时,函数 (function(){ var count = 0; })(); 这是一个简单的自执行匿名函数. 做一个 ...

  6. @synthesize 与@dynamic区别

    @synthesize 除非开发人员已经做了,否则由编译器自动生成getter/setter方法. 当开发人员自定义存或取方法时,自定义会屏蔽自动生成该方法. @dynamic 告诉编译器,不自动生成 ...

  7. Set无序怎么办？

    在JAVA中,提供多种不同的结构来组织对象,Set(集合)是其中的一种,本身是一个接口,其迭代时的顺序取决于其具体实现. 典型的实现包括: HashSet:哈希表是通过使用称为散列法的机制来存储信息的 ...

  8. 《C++ Primer Plus 6th》读书笔记 - 第8章 函数探幽

    1. 摘录 默认参数指的是当函数调用中省略了实参时自动使用的一个值. 默认参数并非编程方面的重大突破,而只是提供了一种便捷的方式.使用默认参数,可以减少要定义的析构函数.方法以及方法重载的数量. 试图 ...

  9. CCF计算机认证注意事项

    1,同一变量只使用一次,你是使用同名的局部变量. 2,if()条件语句里面再不要使用单一的if()条件语句. 这应该都是他们系统的bug

  10. 加密传输SSL协议1_OpenSSL的安装

    终于在自己不断的奋斗之后,来到科大的一波考试过去了,但是为了不使自己过于放松,回顾一下之前的东西,做一下笔记.所以新开一个专题笔记: Using Apache with SSL 引入:首先我们在平时的 ...