怎么设置子元素高度为宽度

可以使用 CSS 中的 padding 或者伪元素来实现。

1. 使用 padding

可以通过将子元素的 padding-top 或 padding-bottom 设置为一个百分比值，来使子元素的高度等于它的宽度。例如：

.parent {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 100%;
  /* 或者使用 padding-bottom: 100%; */
}

2. 使用伪元素

可以通过为子元素添加一个伪元素，然后将伪元素的 padding-top 或 padding-bottom 设置为一个百分比值，来使子元素的高度等于它的宽度。例如：

.parent {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.child::before {
  content: "";
  display: block;
  padding-top: 100%;
  /* 或者使用 padding-bottom: 100%; */
}

以上两种方法都可以实现子元素高度等于宽度的效果。

相关问题

怎么设置子元素高度同宽度的百分比

可以使用 CSS 中的 padding 或者伪元素来实现。

1. 使用 padding

可以通过将子元素的 padding-top 或 padding-bottom 设置为一个百分比值，来使子元素的高度等于它的宽度的百分比。例如：

.parent {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 100%;
  /* 或者使用 padding-bottom: 100%; */
}

如果想要子元素的高度为宽度的百分比，可以将 padding-top 或 padding-bottom 的百分比值改为需要的值。

2. 使用伪元素

可以通过为子元素添加一个伪元素，然后将伪元素的 padding-top 或 padding-bottom 设置为一个百分比值，来使子元素的高度等于它的宽度的百分比。例如：

.parent {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.child::before {
  content: "";
  display: block;
  padding-top: 100%;
  /* 或者使用 padding-bottom: 100%; */
}

如果想要子元素的高度为宽度的百分比，可以将 padding-top 或 padding-bottom 的百分比值改为需要的值。

以上两种方法都可以实现子元素高度等于宽度的百分比的效果。

怎么把父元素的宽度设置成子元素的高度

要将父元素的宽度设置为子元素的高度，可以使用 CSS 中的 transform 属性，通过旋转元素来实现。具体实现方法如下：

.parent {
  position: relative;
  height: 100px;
  width: 200px;
  background-color: #ccc;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #f00;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: top left;
}

在上面的代码中，首先设置了一个父元素和一个子元素，父元素的宽度为 200px，高度为 100px，背景颜色为 #ccc；子元素的高度为 100%，背景颜色为 #f00。

然后通过 transform 属性来将子元素旋转 -90 度，并通过 translateX(-100%) 将其移动到父元素的左边。最后通过设置 transform-origin 为 top left，使得子元素的旋转中心位于父元素的左上角。

这样就可以实现将父元素的宽度设置为子元素的高度。需要注意的是，由于旋转后子元素的宽度变为了高度，因此在进行布局和定位时需要注意坐标系的变化。