如何用CSS使子元素高度与父元素一致且宽度超出父元素边界？

要使子元素的高度与父元素一致，并且宽度超出父元素的边界，可以使用以下CSS方法：

1. 使用 position: absolute; 和 width: auto;

通过将子元素设置为绝对定位，并设置 left 和 right 属性，可以让子元素的宽度超出父元素的边界，同时保持高度与父元素一致。

.parent {
  position: relative; /* 父元素需要相对定位 */
  height: 200px; /* 父元素的高度 */
  width: 300px; /* 父元素的宽度 */
  overflow: visible; /* 允许内容超出边界 */
  border: 1px solid #000; /* 为了演示，添加边框 */
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50px; /* 超出父元素左边界的距离 */
  right: -50px; /* 超出父元素右边界的距离 */
  background-color: #f0f0f0; /* 为了演示，添加背景色 */
}

2. 使用 display: flex; 和 margin

通过使用 flex 布局，并结合负的 margin 值，也可以实现子元素宽度超出父元素边界的效果。

.parent {
  display: flex;
  height: 200px; /* 父元素的高度 */
  width: 300px; /* 父元素的宽度 */
  overflow: visible; /* 允许内容超出边界 */
  border: 1px solid #000; /* 为了演示，添加边框 */
}

.child {
  flex: 1;
  margin-left: -50px; /* 超出父元素左边界的距离 */
  margin-right: -50px; /* 超出父元素右边界的距离 */
  background-color: #f0f0f0; /* 为了演示，添加背景色 */
}

3. 使用 transform: translateX();

通过 transform 属性，可以将子元素水平平移，使其超出父元素的边界。

.parent {
  position: relative;
  height: 200px; /* 父元素的高度 */
  width: 300px; /* 父元素的宽度 */
  overflow: visible; /* 允许内容超出边界 */
  border: 1px solid #000; /* 为了演示，添加边框 */
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateX(-50px); /* 超出父元素左边界的距离 */
  background-color: #f0f0f0; /* 为了演示，添加背景色 */
}

4. 使用 width: calc();

通过 calc() 函数，可以动态计算子元素的宽度，使其超出父元素的边界。

.parent {
  position: relative;
  height: 200px; /* 父元素的高度 */
  width: 300px; /* 父元素的宽度 */
  overflow: visible; /* 允许内容超出边界 */
  border: 1px solid #000; /* 为了演示，添加边框 */
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50px; /* 超出父元素左边界的距离 */
  width: calc(100% + 100px); /* 超出父元素的总宽度 */
  background-color: #f0f0f0; /* 为了演示，添加背景色 */
}

总结

以上方法都可以实现子元素高度与父元素一致且宽度超出父元素边界的效果。选择哪种方法取决于具体的布局需求和浏览器兼容性要求。通常情况下，使用 position: absolute; 是最常见和灵活的方式。