借助padding-bottom实现“适应性矩形”

背景:在页面布局的时候，有时会需要一个特定宽高比的矩形作为页面元素的容器，而且它的宽度是自适应的（要随着页面宽度而变化）。
实现：巧用 padding-bottom，设置其值为百分数（以页面宽度为基准）。例如需要在页面上显示一个正方形容器div，可按图1设置CSS属性（采用了stylus语法）

图1 CSS设置

实现效果如图2所示，页面中出现了白色正方形（当然为了使其垂直居中，还需设置

    display: flex
    flex-direction: column
    justify-content: center

）。

图2 页面效果图

此时正方形容器div的盒模型如图3所示。可以看出，最里面的content盒子高度为0，而该容器div之所以呈现的高度与页面宽度一致，实际上是因为设置了 “ padding-bottom: 100%”，即是通过padding撑开的。（通过padding-top也可以实现这个效果）。

图3 盒模型.png

吐槽下前端知识真是繁杂破碎啊