[分享]css中实现正方形的方法

在CSS中实现正方形有许多方法，以下展示了几种实现方式。

/* 方法一：使用padding-top或padding-bottom */

.square {
  width: 100px;
  padding-top: 100%; /* 或 padding-bottom: 100%; */
}

/* 方法二：使用单一百分比width值 */

.square {
  width: 50%;
  padding-bottom: 50%;
}

/* 方法三：使用伪元素 */

.square {
  position: relative;
  width: 100px;
}
.square::before {
  content: ';
  display: block;
  padding-top: 100%;
} 

方法一：使用padding-top或padding-bottom。该方法是通过给容器设置一个固定的宽度，再使用padding-top或padding-bottom设置百分比值，使其与宽度相等。缺点是在要使用其他样式时，需要使用margin或position等属性来调整元素位置。

方法二：使用单一百分比width值。该方法是通过设置容器的宽度和padding-bottom的百分比值相等，实现正方形。相对于方法一，其优点是更加简洁。但缺点是需要在HTML中设置容器的父级元素宽度为已知值。

方法三：使用伪元素。该方法是通过在容器的伪元素上设置padding-top为100%，使其高度与宽度相等。缺点是在使用伪元素时需要给容器设置position:relative属性，使伪元素的定位是相对于容器的。