先看代码

<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. 基于ContentObserver来动态取消或加入屏幕超时任务

    前面也说了.ContentObserver能够来监控数据库里某一项数据的变化,当然也能够同一时候监控多个数据项的变化. 笔者在项目中须要改动到屏幕超时的需求,比方在车载业务中,倒车事件发生的时候,是不 ...

  2. net基础题

    1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private :   私有成员, 在类的内部才可以访问. protected : 保 ...

  3. echarts3.0 仪表盘实例更改完成占用率实例

    需要完成的项目效果 官方实例效果 基本思路: 首先引入jquery和echarts3.0库. 需要两个仪表盘,一个仪表盘是纯色灰色,在底部.startAngle 和endAngle永远是最大值,默认为 ...

  4. JS错误记录 - 记录上次登陆的用户名

    <script> //步骤 1.submit => 用户名存进cookie 2. onload => 从cookie读取用户名 window.onload = function ...

  5. POJ 1852 Ants || UVA 10881 - Piotr's Ants 经典的蚂蚁问题

    两题很有趣挺经典的蚂蚁问题. 1.n只蚂蚁以1cm/s的速度在长为L的竿上爬行,当蚂蚁爬到竿子的端点就会掉落.当两只蚂蚁相撞时,只能各自反向爬回去.对于每只蚂蚁,给出距离左端的距离xi,但不知道它的朝 ...

  6. 视频编码器评測系统：VideoCodecRank

    视频编码器领域一直有个比較复杂的问题:mpeg2.divx.xvid.mpeg4.vp8.vp9.x264.openh264.x265等等这一系列编码器究竟哪个好?而对于同一种视频编码器,又包括了各种 ...

  7. POJ 题目2823 Sliding Window（RMQ，固定区间长度）

    Sliding Window Time Limit: 12000MS   Memory Limit: 65536K Total Submissions: 46507   Accepted: 13442 ...

  8. keil出现蓝色小箭头

  9. mysql8 mongodb4 增删改查 性能对比，2019 最专业对比，nosql 真的比 sql 性能强很多？

    原文:mysql8 mongodb4 增删改查 性能对比,2019 最专业对比,nosql 真的比 sql 性能强很多? 版权所有:http://www.fengyunxiao.cn 近几年看了很多关 ...

  10. win-server下定时备份oracle数据库实现方法

    1.在e盘建立一个“oracle_backup”的文件夹,文件夹下再建两个文件夹分别为:“new”,“old”,然后在oracle_backup文件夹中新建一个bat文件,取名“expdb.bat”, ...