如何创建width与height比例固定的元素
面试题,刚在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比例固定的元素的更多相关文章
- 解决在onCreate()过程中获取View的width和Height为0的4种方法
很经常当我们动态创建某些View时,需要通过获取他们的width和height来确定别的view的布局,但是在onCreate()获取view的width和height会得到0.view.getWid ...
- 解决获取View的width和Height为0的4种方法
很经常当我们动态创建某些View时,需要通过获取他们的width和height来确定别的view的布局,但是在onCreate()获取view的width和height会得到0.view.getWid ...
- 使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.
1. embed 标签 支持 .swf 格式. .flv 的不支持. 2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ...
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
- 按要求编写一个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 ...
- 【CSS中width、height的默认值】
对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...
- canvas的width和height设置问题
最近在学习canvas属性中遇到一个小问题,就是canvas的width和height设置问题 代码如下: <!DOCTYPE html> <html lang="en&q ...
- 解决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 代码 & ...
- H5 canvas的 width、height 与style中宽高的区别
Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...
随机推荐
- 洛谷【P1561】[USACO12JAN]爬山Mountain Climbing
我对\(Jhonson\)算法的理解:https://www.cnblogs.com/AKMer/p/9863620.html 题目传送门:https://www.luogu.org/problemn ...
- 【原】spring jar 下载
作者:david_zhang@sh [转载时请以超链接形式标明文章] 链接:http://www.cnblogs.com/david-zhang-index/p/8098965.html 1.进入官网 ...
- linux日常管理-系统进程查看工具-ps
查看系统有那些进程 命令有ps aux 和命令 ps -elf USER 哪个用户使用了这个进程 PID 进程的id %CPU 占用CPU的百分比 %MEM 占用内存的百分比 VSZ 虚拟内存的大 ...
- 5种最流行的AI编程语言
人工智能如今正是蓬勃发展的时期,许多开发者都在跃跃欲试,如果你写想转做AI相关的开发,那么来了解更多与AI开发有关的内容吧,本文将介绍创建AI程序时可以使用的5种最佳语言. 人工智能如今正是蓬勃发展的 ...
- 0008_Python变量
1.变量名:数字,字母,下划线组成,不能以数字开头,不能是Python内部关键字. 2.变量类型:数字,字符串,布尔值(首字母大写) 3.内存与变量: 4. = 赋值 == 比较 is == ...
- 华为USG6320做双线-基于源地址的策略路由
通过配置策略路由实现不同源地址数据通过不同的链路转发. 组网需求 某企业公司拉了两条电信的光纤,分别为静态光纤和拨号光纤,前者主要用于服务器,后者则用于一般办公. 需求如下: 静态光纤:服务器专用 拨 ...
- shell解决DOS攻击生产案例
解决DOS攻击生产案例企业实战题5:请用至少两种方法实现!写一个脚本解决DOS攻击生产案例.提示:根据web日志或者或者网络连接数,监控当某个IP并发连接数或者短时内PV达到100,即调用防火墙命令封 ...
- java多线程无锁和工具类
1 无锁 (1) cas (compare and swap) 设置值的时候,会比较当前值和当时拿到的值是否相同,如果相同则设值,不同则拿新值重复过程:注意,在设置值的时候,取值+比较+设值 是一条c ...
- 错误: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. 打开文件后,将 ...
- pip 在windows下如何升级
建议:由于是pip的国外的,在更新之前先开启vpn,这样更新会顺畅些. 官方网页要求在 cmd中输入以下命令进行 pip的 更新: python -m pip install -U pip 更新成功后 ...