先看代码

<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. 微软重生：4年市值U型大逆转，超越谷歌重返巅峰！

    划重点: 智东西(公众号:zhidxcom)文 | 寓扬 在最近的两个星期里,微软和谷歌正在进行一场市值大比拼,双方在7700亿美元上下厮杀正紧,抢夺着全球市值第三大公司的宝座(前两位为市值超过900 ...

  2. C#基础数据类型与字节数组（内存中的数据格式）相互转换（BitConverter 类）

      在某种通讯协议中(如 Modbus),可能需要把一些基本的数据类型内存中的表示形式转换成以字节数组的形式,方便传送.C/C++中可以利用指针等操作完成,但C#中没有指针,咋办呢?可以用BitCon ...

  3. JS学习笔记 - 微博发布效果

    <script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...

  4. 最新GitHub新手使用教程(Linux/Ubuntu Git从安装到使用)——详细图解

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.叙述 1.说明:需要在Windows 安装Git的同学,可以查看该篇博客 https://blog.csdn.net/qq_4 ...

  5. [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative

    Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human reada ...

  6. 3dmax入门

    动画 自己主动关键帧 设置关键帧 路径绑定 材质M打开 渲染f10 骨骼绑定. ..

  7. Java 学习（19）：Java 多线程编程

    Java 多线程编程 Java 给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特 ...

  8. SQL Server 用链接server 同步MySQL

    --測试环境SQL 2014 在MySql环境: use test ; Create Table Demo(ID int,Name varchar(50)) 在控制面板-管理工具-数据源(ODBC)- ...

  9. swift项目第一天：环境部署

    一:项目部署 项目部署 一.开源中国(OSChina) 网站地址:https://git.oschina.net/ 开源中国社区成立于2008年8月,其目的是为中国的IT技术人员提供一个全面的.快捷更 ...

  10. get_mysql_conn_info.py

    #!/usr/bin/env python#-*- encoding: utf8 -*- import xlrd """此模块作用:从excel文件获取数据库连接信息,第 ...