背景:在页面布局的时候，有时会需要一个特定宽高比的矩形作为页面元素的容器，而且它的宽度是自适应的（要随着页面宽度而变化）。
实现：巧用 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
吐槽下前端知识真是繁杂破碎啊
背景:在页面布局的时候，有时会需要一个特定宽高比的矩形作为页面元素的容器，而且它的宽度是自适应的（要随着页面宽度而...
1、vm单位 2、padding-top实现 3、padding-bottom实现 4、伪元素的margin-to...
效果图 实现 1.实现裁剪矩形（裁剪矩形可放大缩小、可拖拽移动） 要确定一个矩形我们只需确定矩形的左上角坐标和长宽...
问题需要总结，知识需要沉淀 实现效果：固定宽高比的盒子 CSS特性：padding-bottom: 56.25%;...
要实现底部fixed按钮适配iPhoneX，单对【height】或【padding-bottom】加safe-ar...
padding-bottom: 0; padding-bottom: constant(safe-area-ins...
如何实现圆角矩形, 有哪些方法可以实现扇形View 圆角矩形使用view.layer.cornerRadius来实...
需求：识别图片中的矩形框，标出矩形区域，并可以裁剪矩形区域 实现方式： 1、使用CIDetector类识别矩形区域...
递归实现 借助栈实现
目录 效果展示 实现原理 这里的实现原理很简单，就是添加多个矩形路径，并不断的延长各个矩形路径的宽度（通过onDr...
本文标题：借助padding-bottom实现“适应性矩形”
本文链接：https://www.haomeiwen.com/subject/ghfluqtx.html
网友评论