先看代码

<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. Java设计模式——代理模式实现及原理

    简介 Java编程的目标是实现现实不能完成的,优化现实能够完成的,是一种虚拟技术.生活中的方方面面都可以虚拟到代码中.代理模式所讲的就是现实生活中的这么一个概念:中介. 代理模式的定义:给某一个对象提 ...

  2. input选中 和 select点击下拉选择获取选中选项的值

    1.input选中$('#checkBox').find('input').each(function(i){ if($(this).prop('checked')){//获取是否选中 并判断 $(t ...

  3. arduino串口输出问题

  4. 洛谷——P1022 计算器的改良

    https://www.luogu.org/problem/show?pid=1022#sub 题目背景 NCL是一家专门从事计算器改良与升级的实验室,最近该实验室收到了某公司所委托的一个任务:需要在 ...

  5. BUFSIZ

    转http://www.judymax.com/archives/262 今天在看示例程序时冒出来一句args = emalloc(BUFSIZ); BUFSIZ是什么意思,查了一下才明白. 这是st ...

  6. [Angular] Angular Global Keyboard Handling With EventManager

    If we want to add global event handler, we can use 'EventManager' from '@angular/platform-broswer'. ...

  7. 用Java将字符串的首字母转换大小写

    在项目开发的时候会需要统一字符串的格式,比如首字母要求统一大写或小写,那用Java如何实现这一功能?下面一起来学习学习. 话不多说,直接上代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 ...

  8. java 返回图片到页面

    @RequestMapping(value = "/image/get")     public void getImage(HttpServletRequest request, ...

  9. Xamarin Android 绑定 UVCCamera

    这段时间工作上需要在Android设备上读取视频.摄像头用的是奥比中光的3D摄像头.我手上的摄像头的彩色通道使用的的UVC协议的. 在Xamarin上可用的UVC的封装基本上没有,只有一个小伙在Xam ...

  10. 【30.36%】【codeforces 740D】Alyona and a tree

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...