CSS实现正方形

在宽可以确定的情况下，去设置高度是比较容易的。

.box {
  width: 10px;
  height: 10px;
}

但是很多场景下不一定，比如行内三个正方形，控制宽度很容易，其实就是各33.333%，但是高度就比较麻烦，可以用margin实现。

.box {
  margin-top: 33.3333%;
  margin-left: 33.3333%;
}

这样可以行宽得到对应的比例，把盒子撑开，但是弊端就是一个元素不够。

CSS的aspect-ratio也可以实现，但是浏览器支持率不是很好，2C的情况进入生产需要注意。

.box {
  width: 100px;
  aspect-ratio: 1 / 1,
}

附上MDN。