巧用margin/padidng的百分比值占位，避免闪烁

当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的

场景：购物平台商品的展示界面

当图片还未加载出来时，高度为零，加载出来后高度变化，出现一个闪烁的过程，影响用户体验。所以需要先进行占位，如上图所示。

使用margin/padding的百分比值来解决自适应高度的关键在于：容器margin/padding的百分比参照物是父元素的宽度，而容器的width的百分比参照物也是父元素的宽度，俩属性参照物一致，那么想要把这俩属性的值统一起来就很简单了。

若图片是宽高比是1：2的。

设置容器的padding-bottom/top

<div class="container"><img />
</div>

.container {width: 50%; // 父元素宽度的一半，显示两列。padding-top: 100%;
}

给子元素/伪元素设置margin/padding撑开容器

若使用上面的方案，会导致max-height失效。原因是容器的高度本来就是padding撑的，而内容高度为0，max-height无法起作用。那想要优化这一点，唯一的方法就是利用内容高度来撑开而非padding，这个方案跟消除浮动所用的方案非常相似：给容器添加一个子元素/伪元素，并把子元素/伪元素的margin/padding设为100%，使其实际高度相当于容器的宽度，如此一来，便能把容器的高度撑至与宽度一致了。由于添加子元素与HTML语义化相悖，因此更推荐使用伪元素(:after)来实现此方案。

.container {width: 50%;position: relative;overflow: hidden;  //需要触发BFC消除margin折叠的问题
}
.container:after {content: '';display: block;margin-top: 200%; //margin 百分比相对父元素宽度计算
}

向容器内部添加内容

上述方案只提及如何不依赖容器内容来撑开容器，那么，在撑开容器后，如何给容器添加内容（图片、文本等）呢？
答案很简单，那就是利用position: absolute;

img {position: absolute;top: 0;width: 100%;
}

转载于:https://www.cnblogs.com/xiongxiaolong/p/10168611.html