[分享]css不固定宽度实现正方形

CSS 实现正方形是我们在设计网页时经常会使用到的技巧。传统的方式是通过设置宽度和高度相等来实现，但是这种方法有一个弊端：当我们的网页需要响应式布局时，正方形的宽度会随着浏览器的大小而改变，而高度却保...

CSS 实现正方形是我们在设计网页时经常会使用到的技巧。传统的方式是通过设置宽度和高度相等来实现，但是这种方法有一个弊端：当我们的网页需要响应式布局时，正方形的宽度会随着浏览器的大小而改变，而高度却保持不变，导致正方形变形。下面我们来介绍一种不固定宽度的方法来实现正方形。

.square {
  width: 50%;
  padding-bottom: 50%;
  /* 宽度为 50%，高度等于宽度的 50% */
  position: relative;
}

.square:before {
  content: "";
  display: block;
  /* 利用伪元素在容器内部创建一个占位元素 */
  padding-top: 100%;
  /* 高度为宽度的 100% */
}

.square > * {
  position: absolute;
  width: 100%;
  height: 100%;
  /* 容器内部元素继承容器高宽，实现正方形 */
} 

首先，我们需要将容器宽度设置为 50% ，高度设置为 0 。接着利用一个 padding-bottom 来撑开容器的高度，其值为容器宽度的 50% ，也就是让容器的高度等于宽度的一半。这样我们就实现了容器高宽相等的效果。

接下来，我们使用伪元素 :before 在容器内部创建一个占位元素，利用 padding-top 来实现其高度等于宽度的效果，这样我们就可以让容器内部的元素继承宽度和高度，实现正方形的效果。

最后，我们将容器内部的元素的定位设置为绝对定位，继承容器高宽，这样就可以实现正方形的效果了。