本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！
也许你会说，left/right以父元素的width为参照物好理解，但是top/bottom为什么也是以父元素的width为参照物的呢？
1、高度自适应占位
假设有这么个场景：
如上图所示，有这么一种用来放图片的容器，图片都是正方形（为了方便举例用正方形，实际上只要固定长宽比例即可）。
在PC端好办，容器的宽高都写死是多少px，这样即使图片加载不出来容器都不会变型。但是在移动端，由于各机型分辨率相差太大，写死px是绝对不可能的，终究还得靠百分比来实现自适应：
容器宽度设个50%吧，这样一行放俩容器，各占屏幕宽度一半，没问题。
图片宽度设个100%取容器的宽度，没问题。
容器高度没法设置啊，因为容器宽高的参照物不一样，而且需求是高度与宽度一致，所以无法通过为容器高度设置百分比来达成，那就只能靠内容高度撑开了。
容器的内容高度就是图片的高度，若图片是正方形，则图片高度与图片宽度一致，也即与容器宽度一致，看起来没问题是吧？实际上，在浏览器把图片加载出来以前，图片的高度是零，那可就没办法把容器撑开了， 这样一来，即使图片加载速度很快，容器在图片加载前后都会有一个变型的过程，也就是俗称的“闪烁”，而如果图片加载不出来，整体布局就更是难看了。
现在问题已经出来了，就是如何做到不靠图片本身就能把容器的高度撑开。
设置容器的padding-bottom/top
使用margin/padding的百分比值来解决自适应高度的关键在于：容器margin/padding的百分比参照物是父元素的宽度，而容器的width的百分比参照物也是父元素的宽度，俩属性参照物一致，那么想要把这俩属性的值统一起来就很简单了。
优化方案是这样的：给容器设置padding-top/padding-bottom跟width一致的值（百分比）。
1
查看更多关于巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）_html/css_的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111598