css实现自适应正方形的方法
页面布局中,我们经常需要用百分比来实现宽度自适应,但是如果这时候高度要跟宽度呈固定比例变化,该怎么办呢?
很简单,我们可以利用元素的padding或margin的百分比值是参照父元素的宽度这一特性来实现,
即如果元素的padding或margin值是百分比值,那么,它的值是根据父元素的宽度来计算的。
所以,实现一个自适应的正方形,可以有两种写法:
可以这么写:
<style>
.box{
width: 50%;
padding-top: 50%;
background-color: black;
}
</style>
<div class="box"></div>
也可以这么写:
<style>
.box{
overflow: hidden;
width: 50%;
background-color: black;
}
.margin{
margin-top: 100%;
}
</style>
<div class="box">
<div class="margin"></div>
</div>
两种方法略有不同,大家可以自行比较,也可以脑洞一些其他方法。
收工!
css实现自适应正方形的方法的更多相关文章
- css实现自适应正方形的多种方法实现
方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw.vh.vmin.vmax.其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width, ...
- css实现自适应正方形
这里介绍7种方法,仅供参考. 1.vm单位 <div class="square-shape">这是一个可以自适应的正方形,此法适用于移动端web页面.</div ...
- CSS 实现自适应正方形
在处理移动端页面时,我们有时会需要将banner图做成与屏幕等宽的正方形以获得最佳的体验效果,比如,商品详情页, 方法1.CSS3 vw单位 CSS3 中新增了一组相对于可视区域百分比的长度单位 vw ...
- CSS布局自适应高度解决方法
这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充.加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏 ...
- CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形
本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- 常见css垂直自适应布局(css解决方法)
css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- CSS实现自适应不同大小屏幕的背景大图的两种方法(转自简书)
CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...
随机推荐
- 设置iptables NAT出外网
有时候云上部署环境,不能动态自设路由,没有公网ip地址的服务器,只能通过NAT的方式出外网,下面就记录一下设置过程. 当前状态 服务器A只有一个内网IP,不能上外网,内网IP与服务器B内网相通:服务器 ...
- 读取excel合并单元格内容
def get_excel_content(excel_path): contents = [] if self.log_path.endswith('xls'): workbook = xlrd.o ...
- python 信号量,Event, 定时器
信号量 信号量也是一把锁,可以指定信号量为5,对比互斥锁同一时间只能有一个任务抢到锁去执行,信号量同一时间可以有5个任务拿到锁去执行. 如果说互斥锁是合租房屋的人去抢一个厕所,那么信号量就相当于一群路 ...
- linux shell使用别名,切换当前目录
别名alias 别名就是一种快捷方式,以省去用户输入一长串命令序列的麻烦. 别名使用alias命令 比如 alias cp='cp -i' alias l.='ls -d .* --color=tty ...
- IIS 301重定向 报错 地址后面有eurl.axd
错误发生的原因是当ASP.NET检测到Web站点配置为使用ASP.NET 4.0,本地ASP.NET 4.0 的组件会传递一个不能扩展的 URL到ASP.NET的管理程序作进一步处理.但是,如果一个低 ...
- POJ 2498
#include<iostream> using namespace std; #include<string> #include<stdio.h> int mai ...
- mxonline 总结
课程相关 课程列表 课程的剪接 课程详情 课程章节 课程关联的授课机构,课程关联的授课教师 热门课程 相关课程推荐 课程留言 需要登录 若未登录,返回到登录页面 留言失败反馈信息 留言成功,异步刷新页 ...
- python 生成器 迭代器
阅读目录 一 递归和迭代 二 什么是迭代器协议 三 python中强大的for循环机制 四 为何要有for循环 五 生成器初探 六 生成器函数 七 生成器表达式和列表解析 八 生成器总结 一 递归和迭 ...
- WPF 中textBox实现只输入数字
刚学到 通过本方法可以使文本框只能输入或复制入数字 对于数量类输入文本框比较有用 金额类只需小改动也可实现 以TextBox txtCount为例 添加TextChanged事件 代码如下 priv ...
- PHP之高性能I/O框架:Libevent(一)
Libevent 是一个用C语言编写的.轻量级的开源高性能I/O框架,支持多种 I/O 多路复用技术: epoll. poll. dev/poll. select 和 kqueue 等:支持 I/O, ...