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 ...
随机推荐
- Dapper系列 作者：懒懒的程序员一枚
Dapper 第一篇简单介绍什么是小巧玲珑?Dapper如何工作安装需求方法参数结果常用类型 Dapper 第二篇 Execute 方法介绍描述存储过程Insert语句Update语句Delete语句 ...
- 9.3.2 map端连接-CompositeInputFormat连接类
1.1.1 map端连接-CompositeInputFormat连接类 (1)使用CompositeInputFormat连接类需要满足三个条件: 1)两个数据集都是大的数据集,不能 ...
- php mySql常用的函数
1.mysql_connect()-建立数据库连接 格式: resource mysql_connect([string hostname [:port] [:/path/to/socket] [, ...
- python网络爬虫（二）requests库的基本介绍和使用
一.requests库的七个重要方法 (1)最常用方法:requests.get(url,params=None,**kwargs)//对应HTTP协议的GET()操作 (请求获得URL位置的资源) ...
- Ansible学习笔记（一）：部署管理Windows机器遇到的一些坑
在给国盛通上海测试环境做Ansible管理Windows服务器的时候,遇到了一些坑,Google解决掉了,特此记录,坑用红色标记. 一.环境说明 1.Ansible管理主机 操作系统:CentOS 7 ...
- 有哪些「看似复杂，实则简单」的 PS 技巧？
Mac版ps2019哪里有?本次主要以组合键为主,PS中隐藏功能都是通过这些“组合技”启动的,据统计熟练地使用一系列组合技会让你的效率提升30%(纯属虚构).其中一些比较难理解的我都制作了GIF动态图 ...
- go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin)
目录 go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin) zipkin使用demo 数据持久化 go微服务框架kratos学习笔记九(kratos 全链路追踪 zipkin ...
- for循环嵌套练习题or99乘法表
//输出1-10之间的和 public static void whileTest(){ //定义变量用于存储不断变化的和 int sum = 0; //定义变量,用于记录不断变化的被加数 int x ...
- PERC H310 配置详细步骤【阵列RAID创建】【阵列恢复】【阵列池创建】
机器配置: HP PRO6300 二手淘的201912,HP的主板芯片Intel Q75芯片组,集成显卡(集成显卡与H310阵列卡冲突),CPU Intel I5 3450 [raid5阵列创建] 1 ...
- window10 cmd 常见命令
AT 计划在计算机上运行的命令和程序. ATTRIB 显示或更改文件属性. BREAK 设置或清除扩展式 CTRL+C 检查. CACLS 显示或修改文件的访问控制列表(ACLs). CALL 从另一 ...