css 设置div基于父元素宽度的宽高相等的样式
1. 前言
在移动开发中,有时候需要设置一个宽高相等的div,并且为了使它能够适配更多的屏幕,于是需要让它的宽高和屏幕宽高成一定的比例。这里将提供一个css的解决方案,让一些后端开发不用再写繁琐的js。
2. 实现代码
html:
<!DOCTYPE html>
<html> <head>
<title>test</title>
</head> <body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
css:
<style>
.wrapper {
position: relative;
height:;
padding-top: 80%;
} .box {
position: absolute;
width: 80%;
height: 100%;
left: 10%;
top:;
border: 1px solid #ccc;
}
</style>
效果:
这样我们就得到一个适应屏幕宽度的正方形,在实际应用中,我们还可以给这个box设置border-radius以及其他各种属性,得到一个更加酷炫的效果。现在我们来分析一下为什么这个css会实现这个效果,了解它的原理有助于我们能够更加得心应手的去修改它。
给wrapper设置height:0;padding-top:80%;会让wapper占据一个宽高比例为10:8的区域。有了这么一个区域是不是就感觉突然有点灵感了。是的,我们在给它的子元素的宽度再取一个百分比,就可以让它的宽高一样了。这里还有一个注意的,warpper的内部其实是没有高度,于是这个子元素就必须使用position:absolute,同时需要给wrapper加上position:relative。
作为一个前端小菜的我,快快努力学习吧,fitting。
css 设置div基于父元素宽度的宽高相等的样式的更多相关文章
- 注意padding-top 百分比定义基于父元素宽度的百分比上内边距!!是基于宽度
定义和用法 padding-top 属性设置元素的上内边距(空间). 说明 该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上 ...
- 解决:子元素设置margin-top,父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...
- 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- 使用flex防止fit-content子元素冲出父元素宽度的方法
父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...
- 纯CSS实现Div高度根据自适应宽度(百分百调整)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ie7 父元素宽度自适应且为浮动的话 子元素的宽度将不能按比例设置问题
好久没切图,昨天遇到个浏览器兼容的老问题,在ie7下,父元素设置浮动后,其宽度是自适应的,子元素的宽度若没有确定则将显示最小宽度,即文本所占的宽度. 正常其他浏览器显示如下: ie7中显示效果如下: ...
- 纯Css实现Div高度根据自适应宽度(百分比)调整
在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...
- 子元素设置margin-top,父元素也受影响
这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事, ...
- CSS设置DIV边框为圆角,添加背景色溢出的问题
这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: . ...
随机推荐
- elasticsearch索引清理脚本shell
es-index-clear.sh: #!/bin/bash#----------------------------------------------# Module: es-index-clea ...
- Redis5.0集群搭建实战
安装环境: 6台 centos7.4 在各个节点下载官网release包,可以自己去官网找: wget http://download.redis.io/releases/redis-5.0.5.t ...
- Sass-减法
Sass 的减法运算和加法运算类似,我们通过一个简单的示例来做阐述: 同样的,运算时碰到不同类型的单位时,编译也会报错,如:
- 分布式理论 BASE、CAP、ACID
CAP原理: 在理论计算机科学中,CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致性(Co ...
- java通过反射拿到mybatis中的sql语句并操作
private static final int MaxBatchLength = 100; public void updateBatch(List<T>list, BaseMapper ...
- k8s-calico【转载】
环境 系统:centos7.3192.168.40.50 local-master192.168.40.51 local-node1192.168.40.52 local-node2 master: ...
- tuple unpacking
拆开Tuple lax_coordinates = (33.9425, -118.408056) latitude, longitude = lax_coordinates # tuple unpac ...
- ubuntu安装deb包(dpkg)
安装 sudo dpkg -i DEB_PACKAGE 卸载 sudo dpkg -r PACKAGE_NAME 重新配置已安装的包 Reconfigure an existing package 例 ...
- 纯JSP简单登录实例
记一下,免得以后忘记了,又要去查. 文件共有四个web.xml.login.jsp.logout.jsp.welcome.jsp四个文件 测试环境:Tomcat 6.0.x 假设项目名称是LoginS ...
- 【HDOJ6610】Game(序列带修莫队)
题意:有n堆石子,第n堆有a[i]个,A先选择一个范围[L,R],B选择一个子区间[l,r],之后照nim游戏的规则进行 现在有询问与操作 每次询问B在给定的[L,R]内有多少种子区间的取法使得A必胜 ...