简述CSS 怎么画一个大小为父元素宽度一半的正方形？

参考答案：

要在CSS中画一个大小为父元素宽度一半的正方形，你需要使用百分比宽度和相等的高度。下面是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  width: 100%; /* 父元素宽度为100% */
  position: relative; /* 父元素设置为相对定位，以便子元素可以相对于它进行定位 */
}

.square {
  width: 50%; /* 正方形宽度为父元素宽度的一半 */
  padding-bottom: 50%; /* 高度通过padding-bottom设置为与宽度相等 */
  background-color: #000; /* 正方形背景色设置为黑色，你可以根据需要更改 */
  position: absolute; /* 正方形设置为绝对定位，以便它可以相对于父元素进行定位 */
  top: 50%; /* 将正方形向上移动其自身高度的一半，使其居中 */
  left: 0; /* 正方形左边缘与父元素左边缘对齐 */
  transform: translateY(-50%); /* 使用transform属性将正方形向上移动其自身高度的一半，确保它完全居中 */
}
</style>
</head>
<body>

<div class="parent">
  <div class="square"></div>
</div>

</body>
</html>

在这个例子中，.parent 类代表父元素，它的宽度被设置为100%。.square 类代表正方形，它的宽度被设置为父元素宽度的一半（50%）。为了保持正方形的高宽比，我们使用 padding-bottom 属性并将其设置为与宽度相同的百分比值（50%）。然后，我们使用绝对定位将正方形相对于父元素居中。最后，我们使用 transform 属性确保正方形在垂直方向上完全居中。