如何创建一个宽度与高度相等的正方形？

好的，以下是我们刚刚的聊天整理成的Markdown格式：

---

如何创建一个宽度与高度相等的正方形？

如果宽度是固定的，可以使用padding-top或者padding-bottom属性来实现：

div {
    
    
  width: 200px;
  padding-top: 200px; /* 与宽度相同 */
  background-color: red;
}

或者使用伪元素来实现：

div {
    
    
  width: 200px;
  position: relative;
  background-color: red;
}

div::before {
    
    
  content: "";
  display: block;
  padding-top: 100%; /* 与宽度相同 */
}

如果宽度是变量，可以使用CSS变量（也称为自定义属性）来实现。例如，假设你有一个变量名为--box-width，你可以这样写：

div {
    
    
  width: var(--box-width);
  padding-top: var(--box-width); /* 与宽度相同 */
  background-color: red;
}

然后在HTML中，你可以使用style属性或者在CSS中定义根元素的自定义属性来设置这个变量的值：

<div style="--box-width: 200px;"></div>

或者在CSS中定义根元素的自定义属性：

:root {
    
    
  --box-width: 200px;
}

然后在HTML中，你可以简单地写：

<div></div>

这样，这个div元素的宽度就会自动设置为200px，并且它的高度也会与宽度相同，因为padding-top属性是根据宽度来计算的。

如果这个div元素是在grid中，并且宽度应该是100%，那么你可以使用grid-template-rows属性来设置每一行的高度，然后使用auto关键字来让这个div元素的高度自动适应它的宽度，例如：

.grid-container {
    
    
  display: grid;
  grid-template-rows: auto; /* 设置每一行的高度为自适应 */
}

.box {
    
    
  width: 100%;
  padding-top: 100%; /* 与宽度相同 */
  background-color: red;
}

然后在HTML中，你可以这样写：

<div class="grid-container">
  <div class="box"></div>
</div>

这样，这个div元素的宽度就会自动适应它的父元素（即.grid-container元素），并且它的高度也会自动适应宽度，因为padding-top属性是根据宽度来计算的，而且grid-template-rows属性设置了每一行的高度为自适应。

---

希望这些方法能够帮助你创建宽度与高度相等的正方形！