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

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

借助padding-bottom实现“适应性矩形”_第1张图片
图1 CSS设置

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

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

)。


借助padding-bottom实现“适应性矩形”_第2张图片
图2 页面效果图

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


借助padding-bottom实现“适应性矩形”_第3张图片
图3 盒模型.png

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

你可能感兴趣的:(借助padding-bottom实现“适应性矩形”)