css使用padding-bottom百分比进行提前占位,防止抖动
页面加载抖动问题
在web开发中,经常会遇到这样一个问题,比如一个宽度百分百,高度自适应的图片,在网速慢的情况下加载过程中会出现抖动的问题(未加载图片前容器的高度为0,图片加载完成后下面的内容会被挤下去)。
这种问题如果是图片有固定高度,就不会出现加载抖动。但一般情况下,为了使图片不被拉伸,高度一般设为自适应,那么为了防止加载抖动,我们需要给图片提前占个位,这里使用的是css的padding-bottom百分比进行占位。
示例代码如下
.img-box{
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 50%;
}
padding-bottom实际上是提前占位了,这个容器的高度始终是0,高度为0还之所以能够显示内容是因为内容溢出在了padding-bottom上,这里的50%是图片的高宽比例,切记是相对于父元素宽度的50%(即.img-box的上一级),不是相对于自己的width,详情请看下面的例子。
这里写了一个小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding-bottom</title>
<style>
.content{
width: 400px;
height: 400px;
margin: 100px auto;
background-color: aquamarine;
}
.box1{
width: 100%; /* 400px 相对于content的width */
height: 0;
padding-bottom: 50%; /* 200px 相对于content的width */
background-color: red;
}
.box2{
width: 25%; /* 100px 相对于box1的width */
height: 0;
padding-bottom: 25%; /* 100px 相对于box1的width */
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
<div class="box1">
<div class="box2"></div>
</div>
</div>
</body>
</html>
如图所示
这种情况下box2中如果有图片宽高比为一比一时(根据padding的百分比),加载过程中就不会出现抖动的情况,同理box1也是如此。
当然解决抖动还有其他方法,比如何以用vw(兼容性不太好,这里就不列举了),还有比如在微信小程序中rpx,如果图片的设计大小宽高为750×300时,就可以直接写成height: 300rpx。
css使用padding-bottom百分比进行提前占位,防止抖动的更多相关文章
- CSS笔记——padding,margin为百分比计算时的参照对象
div的padding为百分比的两种情况 padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的 1. ...
- 利用padding-top/padding-bottom百分比,进行占位和高度自适应
在css里面,padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候,参照的是父元素的宽度. 比如:父元素宽度是100px, 子元素p ...
- 移动端网页巧用 margin和padding 的百分比实现自适应
一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素 ...
- css定位中的百分比
----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比 首先从css的设计意图说起,在浏览器默 ...
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...
- margin、padding单位百分比
年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/,里面有一道题目涉及到了margin和padding单位为百分比的情况.写出来记录一下以防止自己忘记. <! ...
- [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 图解CSS的padding,margin,border属性(详细介绍及举例说明)
图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- CSS中padding和margin以及用法
CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...
随机推荐
- PBFT算法java实现
PBFT 算法的java实现(上) 在这篇博客中,我会通过Java 去实现PBFT中结点的加入,以及认证.其中使用socket实现网络信息传输. 关于PBFT算法的一些介绍,大家可以去看一看网上的博客 ...
- 面试题|手写JSON解析器
这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言).示例输入: fakePars ...
- tensorflow roadshow 全球巡回演讲 会议总结
非常荣幸有机会来到清华大学的李兆基楼,去参加 tensorflow的全球巡回.本次主要介绍tf2.0的新特性和新操作. 1. 首先,tensorflow的操作过程和机器学习的正常步骤一样,(speak ...
- windows10 CTCP
windows上除了普通tcp之外,有一个CTCP. 据说可以提升长延时情况下的吞吐量. win7可以方便的通过netsh int tcp set global congestionprovider= ...
- Nginx 主要应用场景
前言 本文只针对 Nginx 在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文本身也可能介绍的不完整,毕竟只是我个人使用过和了解到过得.所以还请见谅,同时欢迎留言交流 ...
- Android studio 断点调试整理
一. 开始断点调试 点击debug开始调试
- Django设置异步任务
1.安装Django-celery 包:pip install django-celery==3.2.2 2.开启redis服务 需要使用redis做broker,所以在使用异步和定时任务时需要开启r ...
- React中setState注意事项
setState是一个异步函数,异步获取数据 学习react在使用ref和setState操作DOM时会遇到的问题: ref获取ul结点元素 错误写法:得到的ul长度总是上一次输入后的长度 结果: 正 ...
- MacBook Pro突然蓝牙突然消失
刚才想用蓝牙,发现蓝牙居然不可用,硬件信息也无法找到,分享一个方法:
- StackExchange.Redis 之 String 类型示例
String类型很简单,就不做示例演示了,这里只贴出Helper类 /// <summary> /// 判断key是否存在 /// </summary> /// <par ...