css制作正方xin

使用CSS制作正方形

通过CSS可以轻松创建正方形，以下是几种常见方法：

固定宽高法

设置宽度和高度相同，并添加背景色或边框以显示正方形：

.square {
  width: 100px;
  height: 100px;
  background-color: #3498db;
}

百分比宽高法

结合百分比和padding-top技巧实现响应式正方形：

.square-responsive {
  width: 20%;
  padding-top: 20%; /* 与width相同 */
  background-color: #2ecc71;
  position: relative;
}

视口单位法

使用vw或vh单位创建基于视口的正方形：

.square-viewport {
  width: 20vw;
  height: 20vw;
  background-color: #e74c3c;
}

使用aspect-ratio属性

现代浏览器支持aspect-ratio属性直接控制宽高比：

.square-ratio {
  width: 150px;
  aspect-ratio: 1/1;
  background-color: #f39c12;
}

伪元素技术

通过伪元素创建保持宽高比的容器：

.square-pseudo {
  width: 30%;
  position: relative;
}
.square-pseudo::before {
  content: "";
  display: block;
  padding-top: 100%;
  background-color: #9b59b6;
}

每种方法适用于不同场景，固定宽高法适合确定尺寸的元素，百分比和视口单位法适合响应式设计，aspect-ratio是最简洁的现代解决方案。