<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>padding-bottom布局</title>

     <style>

         #q{width:800px; height:700px; background:#f45;}

         #c{width:400px; height:350px; padding-bottom:50%; background:#00f}

         .out{width:100%;height:300px;background:#f45;}

         .a,.b{width:50%;background:#00f;padding-bottom: 10%;

             float: left;}

     </style>

 </head>

 <body>

 <div id="q">

     <div id="c">

         SKJFLDKLKSAL;

     </div>

 </div>

 <!--  padding-bottom的百分比的值是按照父元素宽度的值计算的 #q的宽度为800,c的padding-bottom值为50%;浏览器

 解析后的值为400px;

 一般的用法是父元素设置一个宽度，子元素设置自己的padding-bottom按百分比，

 这种布局方法适用于这样一个情景；一个元素的背景需要全部显示出来，并且比例不变；随着屏幕大小变化；

 要求本元素不会变形始终维持一个比例；通俗的讲就是让一个元素铺上背景，达到图片的显示效果;

 1、一个元素的宽度值是父元素宽度值的百分比；

 2、此元素通过设置padding-bottom的百分比，使其达到本元素的高度，按照父元素的宽度的值来计算；

 -->

 <script src="http://libs.useso.com/js/jquery/1.8.3/jquery.js"></script>

 <script>

 </script>

 </body>

 </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. html5介绍

    html5与html4的区别   (h5 and h4)   什么是OPOA   1,    浏览器对h5的支持情况 2,    历史 --- h5         2004年,whatwg 提出 w ...

  2. Asp.net MVC1 学习1

    此次博客的编写纯属是为了记录自己的学习情况 asp.net mvc学习教程来自于重点,地址:http://v.youku.com/v_show/id_XNDQ4MDQ1MzI=.html?f=2416 ...

  3. Oracle EBS-SQL (BOM-13):检查未定义库存分的物料类.sql

    select distinct msi.segment1            编码 , msi.description                      描述  , msi.primary_ ...

  4. IOS研究院之打开照相机与本地相册选择图片

    如下图所示 在本地相册中选择一张图片后,我们将他拷贝至沙盒当中,在客户端中将它的缩略图放在按钮旁边,这个结构其实和新浪微薄中选择图片后的效果一样.最终点击发送将按钮将图片2进制图片上传服务器. 下面我 ...

  5. wchar_t 、UTF-8、UTF-16的转换方法 - luketty的专栏 - 博客频道 - CSDN.NET

    wchar_t .UTF-8.UTF-16的转换方法 - luketty的专栏 - 博客频道 - CSDN.NET wchar_t .UTF-8.UTF-16的转换方法

  6. mysql数据库学习（一）--基础

    一.简介 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是最好的 R ...

  7. 使用yii中CSecurityManager的一点小技巧

    当我们使用CSecurityManager::encrypt对字符串进行加密, 加密后的字符串是一串乱码(看起来确实像乱码, 具体是什么有待考证), 这不利于我们的下一步操作. 我们可以使用base6 ...

  8. Nginx基础教程PPT

    Nginx基础教程PPT By 马冬亮(凝霜  Loki) 一个人的战争(http://blog.csdn.net/MDL13412) pdf版本号下载 watermark/2/text/aHR0cD ...

  9. 服务管理——ntp

    一 ntp相关知识 什么是时间同步服务器 Network Time Protocol(NTP)是用来使计算机时间同步化的一种协议,它可以使计算机对其服务器或时钟源(如石英钟,GPS等等)做同步化,它可 ...

  10. OAuthBase.cs

    using System; using System.Security.Cryptography; using System.Collections.Generic; using System.Tex ...