CSS使子兄弟在100%宽度的父级中具有相同的宽度和高度(正方形)

要实现子兄弟在100%宽度的父级中具有相同的宽度和高度（正方形），可以使用CSS的flexbox布局和伪元素来实现。

首先，需要将父级容器设置为flex布局，通过设置display属性为flex，可以使子元素自动排列在一行或一列上。

然后，给父级容器设置宽度为100%。

接下来，给子元素设置flex属性为1，这样子元素会平均分配父级容器的宽度。

为了使子元素具有相同的高度，可以使用伪元素来撑开子元素的高度。给子元素添加::before伪元素，并设置content属性为空字符串，然后设置flex属性为1，这样伪元素会自动填充子元素的高度。

最后，为了使子元素呈现正方形的形状，可以通过设置padding-bottom属性为100%来实现。这样子元素的高度将与宽度相等。

以下是示例代码：

HTML:

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

CSS:

.parent {
  display: flex;
  width: 100%;
.child {
  flex: 1;
  position: relative;
.child::before {
  content: "";
  display: block;
  padding-bottom: 100%;
/* 可以根据需要添加其他样式 */

这样，子兄弟元素就可以在100%宽度的父级容器中具有相同的宽度和高度（正方形）了。

关于CSS的flexbox布局和伪元素的详细介绍和用法，可以参考腾讯云的CSS Flexbox布局和CSS伪元素相关文档。

腾讯云CSS Flexbox布局文档链接：https://cloud.tencent.com/document/product/1212/45136

腾讯云CSS伪元素文档链接：https://cloud.tencent.com/document/product/1212/45137