页面加载抖动问题

在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百分比进行提前占位，防止抖动的更多相关文章

  1. CSS笔记——padding，margin为百分比计算时的参照对象

    div的padding为百分比的两种情况 padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的 1. ...

  2. 利用padding-top/padding-bottom百分比，进行占位和高度自适应

    在css里面,padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候,参照的是父元素的宽度. 比如:父元素宽度是100px, 子元素p ...

  3. 移动端网页巧用 margin和padding 的百分比实现自适应

    一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素 ...

  4. css定位中的百分比

    ----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比 首先从css的设计意图说起,在浏览器默 ...

  5. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  6. margin、padding单位百分比

    年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/,里面有一道题目涉及到了margin和padding单位为百分比的情况.写出来记录一下以防止自己忘记. <! ...

  7. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  8. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  9. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

随机推荐

  1. Linux高级系统恢复技术

    一,MBR毁坏: 查看系统分区在那: 毁坏MBR: 如果没有重启动,可以直接恢复: 如果重启之后就不可启动系统,需要恢复系统: 出现这样的情况: force off关机,使用光盘启动,添加一个镜像光盘 ...

  2. ps查看资源消耗

  3. Angular目录结构

    一. Angular目录结构 e2e:在e2e/下是端到端测试 node_modules:安装的第三方模块都在这,使用npm install安装的1 Src:我们项目的所有文件 { App:组件,以a ...

  4. Force removing ActivityRecord no saved state问题的原因分析

    关键字,crash Force removing ActivityRecord,app died, no saved state的原因 相机拍摄的过程中断电,拍了一张黑图 I/ActivityMana ...

  5. 使用docker创建MySQL容器，并在springboot中使用

    最近在看网上找了个springboot的项目试试,在项目中需要的MySQL版本是5.7,但是本机的MySQL只有5.5.因此想着在我的服务器上跑一个MySQL:5.7的容器解决这一问题,但是在实际操作 ...

  6. 【转载】Python 最强编辑器PyCharm详细使用指南！

    PyCharm 是一种 Python IDE,可以帮助程序员节约时间,提高生产效率.那么具体如何使用呢?本文从 PyCharm 安装到插件.外部工具.专业版功能等进行了一一介绍,希望能够帮助到大家.机 ...

  7. JavaScript之BOM基础

    BOM(Browser Object Model)也叫浏览器对象,它提供了很多对象,用于访问浏览器的功能.但是BOM是没有标准的,每一个浏览器厂家会根据自己的需求来扩展BOM对象.本文主要以一些简单的 ...

  8. 知名KMS模拟器的官方发布网址

    些知名KMS模拟器的官方发布网址: 本机自激活安装类KMS激活软件,容易在系统升级中被查杀失效,且在软件传播过程中极易被捆绑植入后门.病毒,不推荐尝试. Windows Loaderhttps://f ...

  9. Elasticsearch编程操作

    1.创建工程导入依赖 <dependency> <groupId>org.elasticsearch</groupId> <artifactId>ela ...

  10. clr via c# 参数和属性

    1,可选参数和命名参数 当给参数指定默认值时,可以在调用的时候省略 有默认值的参数,必须放在所有没有默认值的参数后面,但是 参数数组必须放在最后面,parm 默认值必须时编译时能确定的常量值,对于值类 ...