先看代码

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .outer {

            width: 300px;

            height: 600px;

            background: #888;

        }

        .b169 {

            width: 100%;

            height: 0;

            padding-bottom: 56.2%;

            position: relative;

        }

        .b169 > .innerb169 {

            width: 100%;

            height: 100%;

            background-color: red;

            position: absolute;

        }

    </style>

</head>

<body>

    <script type="text/javascript">

    </script>

    <div class="outer">

        <div class="b169">

            <div class="innerb169">hello</div>

        </div>

    </div>

</body>

要查一下资料了。规定基于父元素的宽度的百分比的内边距。

padding百分百值是相对谁的百分比的更多相关文章

  1. 关于margin和padding取值为百分比和负值的总结

    以下是自己学习过程中的总结,直接上结论: 1.margin/padding取值为百分比: margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的. 2.margin取值为负 ...

  2. 当margin和padding的值是百分比时，如何计算

    对元素的margin设置百分数时,百分数是相对于自身包含块的width计算(包含块传送门),不管是margin-top/margin-bottom还是margin-left/margin-right. ...

  3. css的框模型速查

    在css中,每个元素被视为一个框. 每个框具有3个属性: border 框的边框 margin 框与相邻框之间的距离 padding 框内容和边框之间的距离 对于margin存在一种特例:当元素底部页 ...

  4. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  5. css padding 填充

    语法: padding:[ <length> | <percentage> ]{1,4} 默认值:看每个独立属性 适用于:所有元素,除 table-row-group | ta ...

  6. Padding Borders Outlines Margins

    简介: 在20世纪90年代,许多网页布局是使用table,使用table最主要的原因是因为可以放text到一个盒子里,但是这是一个比较复杂的过程,现在可以使用比较简单的方法,那就是css. 元素盒子: ...

  7. CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系

    一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...

  8. css笔记 - 张鑫旭css课程笔记之 padding 篇

    [padding地址](https://www.imooc.com/learn/710) 一.padding与容器尺寸之间的关系 padding会影响元素的尺寸(通常情况下是通过增加/挤压内容区域) ...

  9. 浅谈padding

    浅谈padding padding是CSS盒子模型的一部分,代表盒子模型的内边距. 用法 padding属性有四个值,分别代表上.右.下.左的内边距. .box { padding: 10px 5px ...

随机推荐

  1. crm翻译导航栏

    在crm里面怎样翻译导航栏? 过程例如以下: 1 先新建一个解决方式.把网站地图加进去 2: 然后把这个解决方式到出来来,解压文件: 3:编辑第二个文件: watermark/2/text/aHR0c ...

  2. Jmeter--性能测试工具的搭建

    第一步:Jmeter软件下载第二步:解压下载的Jmeter包到某一盘符下,最好解压到无中文字符目录下,防止乱码问题,以我电脑为例,比如:D:tools第三步:找到解压的文件jmeter.bat,一般在 ...

  3. iOS开发- iOS7显示偏差(UITableView下移)解决的方法

    之前碰到过一个问题. 就是利用storyboard拖动出来的控件, 在iOS7上跑老是莫名的下移. 比方这样(红色区域为多余的) 解决的方法: iOS7在Conttoller中新增了这个属性: aut ...

  4. 【Android工具类】验证码倒计时帮助类CountDownButtonHelper的实现

    转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 我们在做有关短信验证码功能的时候.为了防止用户无休止的获取短信验证码,或者是误操作.造成验证码混乱的情况.我 ...

  5. c++11 多线程 -- 基本使用

    c++11 多线程 – 基本使用 前言:这篇文章仅针对没有使用过c++11线程库的童鞋来高速入门,也是自己的一个简单记录,内容比較基础. 1.线程的基本使用 2.相互排斥量 3.条件变量 4.原子变量 ...

  6. C_C++指针指针应用详解

    前言:复杂类型说明 要了解指针,多多少少会出现一些比较复杂的类型,所以我先介绍一下如何完全理解一个复杂类型,要理解复杂类型其实很简单,一个类型里会出现很多运算符,他们也像普通的表达式一样,有优先级,其 ...

  7. FastSocket学习笔记~RPC的思想，面向对象的灵活

    首先非常感谢这位来自新浪的老兄,它开发的这个FastSocket非常不错,先不说性能如何,单说它的使用方式和理念上就很让人赞口,从宏观上看,它更像是一种远程过程的调用RPC,即服务器公开一些命令,供客 ...

  8. 【Codeforces Round #185 (Div. 2) C】The Closest Pair

    [链接] 链接 [题意] 让你构造n个点,去hack一种求最近点对的算法. [题解] 让x相同. 那么那个剪枝就不会起作用了. [错的次数] 在这里输入错的次数 [反思] 在这里输入反思 [代码] # ...

  9. 观CSDN站点小Bug有感

            今天早上在浏览博客的时候偶然发现CSDN博客的数据出现了异常,我也是头一次看到这么明显的Bug.详细什么表现呢?先来看个截图.例如以下:             常常看CSDN博客的人 ...

  10. 详解HTML的a标签（超链接标签）

    原文 简书原文:https://www.jianshu.com/p/d6a2499db73b 大纲 1.什么是<a>标签 2.<a>标签的几个重要属性 3.a标签的运行机制 4 ...