先看代码

<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. javascript中的事件问题的总结

    一.什么是事件? 事件就是DOM和浏览器之间的交互行为(只要触发了这个行为,也就相当于触发了事件),我们可以通过事件监听来绑定事件,例如:box.onclick=function(){},如果我们点击 ...

  2. QT5.5

    QT创建空项目时,会有报错“无法解析的外部符号”,方法是在 .pro文件中添加 以下,即可QT+=core gui widgets

  3. 29、从零写USB摄像头驱动之通过urb接受数据后上报数据是函数中fid的作用

    原因分析如下: 视频数据是由一帧一帧数据组成,为了防止数据错乱,会给每一帧数据分配一个frameid,从第0帧开始,接着是第1帧,接着又是第0帧这样交错进行的,对usb摄像头来说每一帧数据来源于多个包 ...

  4. [Angular2 Form] Reactive Form, show error message for one field

    <form [formGroup]="reactiveForm" novalidate autocomplete="off"> <div cl ...

  5. Qt 使用qDebug() 打印Qlist 容器数据（将QDebug()定义成某个类的友元函数）

    当QList<T>容器中的数据用qDebug() 打印时 ,假如 T 是内置类型(int  float ...)与 打印一个字符串使用完全一样,假如T 是一个CustomerClass 那 ...

  6. angular表单知识点

    原文 https://www.jianshu.com/p/c772d143e1fc 大纲 1.对表单的理解 2.模板驱动表单(Template Driven Forms) 3.响应式表单(Reacti ...

  7. JDK8 JVM性能优化-1

    原文地址:https://blog.csdn.net/xingkongtianma01/article/details/80689928 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的 ...

  8. [CSS] Manipulate Images Using CSS Filter and Blend Modes

    Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, yo ...

  9. [Python学习] 简单爬取CSDN下载资源信息

    这是一篇Python爬取CSDN下载资源信息的样例,主要是通过urllib2获取CSDN某个人全部资源的资源URL.资源名称.下载次数.分数等信息.写这篇文章的原因是我想获取自己的资源全部的评论信息. ...

  10. 【编程】常见概念的理解 —— inplace、vanity url、vanilla（code/software）、编译、链接、build、（delegate、proxy）

    inplace: 如修改一个文件等对象时, inplace=True,不创建新的对象,直接在原始对象上尽心修改: inplace=False,在对原始对象进行修改,而会创建新的对象: vanity u ...