前端开发免不了有图片、视频等一些模块需要大力度渲染，当网速较慢时这些模块的渲染时间相对较长，导致页面其他元素位置可能发生细微抖动，这对产品的用户体验是有所影响的。这时用个小技巧便可以解决问题。
height:0: 盒子高度。我们都知道 盒子高度=内容高度+上下内边距，这里我们指定目前盒子高度为0，为下文操作做铺垫。
padding-bottom: 盒子的底部内边距。开发中常见的写法是百分比(也可以像素单位)，例如padding-bottom:50%。这里的百分数是高/宽比例，它是参照父元素的宽度，一般父元素宽度我们会给定值或者width:100%，这时该盒子就会被下内边距撑开了父元素宽度二分之一的高度，以此作为盒子的高度。
overflow:hidden: 将超出盒子区域的内容隐藏，它指的区域是包括内边距的。和前面两条样式语句配合，达到页面渲染时既不影响布局又防止抖动的效果了。
实例：
<body>
<div class="test">
<div class="img">
<img class="img-content" src="./img-8bb2c2f329e676cf98ddf0e14a3e72b6.jpg" alt="">
</div>
<div>
<p>图片加载完成前我的位置不会抖动</p>
</div>
</div>
</body>
<style>
.test{
width: 200px;
}
.img{
height: 0; /*盒子高度为零*/
padding-bottom: 65%; /*盒子高度被下内边距撑开*/
overflow: hidden; /*超出部分隐藏*/
background: #eee;
}
.img-content{
width: 100%;
}
</style>
以上是代码实例和页面渲染前后的效果图。不难看出，在图片渲染完成前padding-bottom会先将盒子撑开，背景颜色设为浅灰。由于高度保持着，下面的文字也就不会出现位置上下移的抖动情况。(有兴趣的朋友可以在浏览器控制台网络那里设置3G网络作研究对比)
5323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
