面试题,刚在github上看到的,说说这里面的知识点吧~~

padding-bottom的值,其百分比是根据元素自身的width来算的。

padding,在标准盒模型中,width+padding+border=内盒

到这里,其实已经做到了宽高自适应且固定比例,题目算是解答完成了。不过,我们可以扩展下这个问题:

好了,新的问题来了,wrap的position为relative,而高度又无法指定,怎么让子元素的高度占满父元素呢?我们知道直接为box指定height:100%是没有效果的。

这时就又用到了神奇的position:absolute;结合left:0;top:0;right:0bottom:0;可以使box完全填充满父元素wrap,当然你不能额外的为box指定width与height,那样会功归一篑。

    <style>
.wrap{width: 100%;
position: relative;
padding-bottom: 20%;
}
.wrap .box{
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
background-color: #edd;
}
</style>
<div class="wrap">
<div class="box">
高宽5:1
</div>
</div>

还可以继续给box加padding,border,margin什么的,都ok的哟~~

        .wrap .box{
position: absolute;
left:;
top:;
right:;
bottom:;
padding: 10px;
margin: 15px;
background-color: #edd;
border: 5px solid #fff;
}

如何创建width与height比例固定的元素的更多相关文章

  1. 解决在onCreate()过程中获取View的width和Height为0的4种方法

    很经常当我们动态创建某些View时,需要通过获取他们的width和height来确定别的view的布局,但是在onCreate()获取view的width和height会得到0.view.getWid ...

  2. 解决获取View的width和Height为0的4种方法

    很经常当我们动态创建某些View时,需要通过获取他们的width和height来确定别的view的布局,但是在onCreate()获取view的width和height会得到0.view.getWid ...

  3. 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.

    1. embed 标签 支持  .swf 格式.     .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...

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

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

  5. 按要求编写一个Java应用程序: (1)编写一个矩形类Rect,包含: 两个属性:矩形的宽width;矩形的高height。 两个构造方法: 1.一个带有两个参数的构造方法,用于将width和height属性初化; 2.一个不带参数的构造方法,将矩形初始化为宽和高都为10。 两个方法: 求矩形面积的方法area() 求矩形周长的方法perimeter() (2)通过继承Rect类编写一个具有确定位

    package com.hanqi.test; public class Rect { ; ; public double getWidth() { return width; } public vo ...

  6. 【CSS中width、height的默认值】

    对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...

  7. canvas的width和height设置问题

    最近在学习canvas属性中遇到一个小问题,就是canvas的width和height设置问题 代码如下: <!DOCTYPE html> <html lang="en&q ...

  8. 解决Echarts+<el-tab-pane>的警告:Can't get DOM width or height

    1 问题描述 环境: Chrome 87 Element-Plus Vue3.0.5 <el-tab>+<el-tab-pane>中使用Echarts 警告如下: 2 代码 & ...

  9. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

随机推荐

  1. 洛谷【P1561】[USACO12JAN]爬山Mountain Climbing

    我对\(Jhonson\)算法的理解:https://www.cnblogs.com/AKMer/p/9863620.html 题目传送门:https://www.luogu.org/problemn ...

  2. 【原】spring jar 下载

    作者:david_zhang@sh [转载时请以超链接形式标明文章] 链接:http://www.cnblogs.com/david-zhang-index/p/8098965.html 1.进入官网 ...

  3. linux日常管理-系统进程查看工具-ps

    查看系统有那些进程 命令有ps aux 和命令 ps -elf USER  哪个用户使用了这个进程 PID  进程的id %CPU 占用CPU的百分比 %MEM 占用内存的百分比 VSZ 虚拟内存的大 ...

  4. 5种最流行的AI编程语言

    人工智能如今正是蓬勃发展的时期,许多开发者都在跃跃欲试,如果你写想转做AI相关的开发,那么来了解更多与AI开发有关的内容吧,本文将介绍创建AI程序时可以使用的5种最佳语言. 人工智能如今正是蓬勃发展的 ...

  5. 0008_Python变量

    1.变量名:数字,字母,下划线组成,不能以数字开头,不能是Python内部关键字. 2.变量类型:数字,字符串,布尔值(首字母大写) 3.内存与变量: 4. =    赋值 ==   比较 is == ...

  6. 华为USG6320做双线-基于源地址的策略路由

    通过配置策略路由实现不同源地址数据通过不同的链路转发. 组网需求 某企业公司拉了两条电信的光纤,分别为静态光纤和拨号光纤,前者主要用于服务器,后者则用于一般办公. 需求如下: 静态光纤:服务器专用 拨 ...

  7. shell解决DOS攻击生产案例

    解决DOS攻击生产案例企业实战题5:请用至少两种方法实现!写一个脚本解决DOS攻击生产案例.提示:根据web日志或者或者网络连接数,监控当某个IP并发连接数或者短时内PV达到100,即调用防火墙命令封 ...

  8. java多线程无锁和工具类

    1 无锁 (1) cas (compare and swap) 设置值的时候,会比较当前值和当时拿到的值是否相同,如果相同则设值,不同则拿新值重复过程:注意,在设置值的时候,取值+比较+设值 是一条c ...

  9. 错误:Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web

    在eclipse的workspace里面找到该项目. 依次进入:.settings->org.eclipse.wst.common.project.facet.core.xml. 打开文件后,将 ...

  10. pip 在windows下如何升级

    建议:由于是pip的国外的,在更新之前先开启vpn,这样更新会顺畅些. 官方网页要求在 cmd中输入以下命令进行 pip的 更新: python -m pip install -U pip 更新成功后 ...