css奇淫技巧--盒子高度如何与已知宽度保持相等

uniapp 盒子宽度已设置为手机屏幕宽度的百分百，高度如何做到始终和宽度保持一致？

在 uni-app 中如何设置一个元素的高度始终和宽度保持一致。在 uni-app 中，你可以使用 CSS 来实现这个效果。

首先，你已经将盒子的宽度设置为手机屏幕的百分百，这可以通过 CSS 的 width: 100%; 来实现。

然后，为了让高度始终和宽度保持一致，你可以使用 CSS 的 padding-top 属性。这个属性可以设置为百分比，这个百分比是相对于元素的宽度的。所以，如果你设置 padding-top: 100%;，那么元素的高度就会和宽度保持一致。

这是一个例子：

.box {
  width: 100%;
  padding-top: 100%;
}

这样，.box 元素的高度就会始终和宽度保持一致了。

请注意，这种方法会使得元素的内容被垂直方向上的 padding 推出元素的边界。如果你想要元素的内容在元素内部，你可以使用一个额外的元素来包裹内容，并设置其绝对定位。例如：

.box {
  width: 100%;
  padding-top: 100%;
  position: relative;
}

.box-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

然后，你可以将内容放在 .box-content 元素中。