如何让父容器和子容器一样大？

要让父容器和子容器一样大，可以使用CSS中的flex布局或者grid布局来实现。

1. 使用flex布局：
   • 将父容器的display属性设置为flex。
   • 设置父容器的flex-direction属性为row或column，决定子容器的排列方向。
   • 设置父容器的align-items属性为stretch，使子容器在交叉轴上拉伸填充父容器。
   • 设置子容器的flex属性为1，使其在主轴上拉伸填充父容器。

示例代码：

.parent-container {

 display: flex;

 flex-direction: row; /* 或 column */

 align-items: stretch;

}

.child-container {

 flex: 1;

}

1. 使用grid布局：
   • 将父容器的display属性设置为grid。
   • 使用grid-template-columns和grid-template-rows属性来定义父容器的列和行。
   • 设置子容器的grid-column和grid-row属性，使其占满父容器的列和行。

示例代码：

.parent-container {

 display: grid;

 grid-template-columns: 1fr; /* 或多个列的宽度 */

 grid-template-rows: 1fr; /* 或多个行的高度 */

}

.child-container {

 grid-column: 1 / span 1; /* 或其他列的范围 */

 grid-row: 1 / span 1; /* 或其他行的范围 */

}

以上是两种常见的方法，可以根据具体需求选择适合的布局方式来实现父容器和子容器一样大。