Css 如何使子项正确超出父项宽度？

我有一个父（容器）和一个子（h1头/块）

问题是出于某种原因，它没有将父像素向左延伸30像素，向右延伸30像素，而是将父像素向右延伸60像素。 现在我只设置了负的左边距-30px，将其拉回并使其平衡，但我想知道是否有更好/正确的方法来实现它

这是一张发生了什么的图片：

这是一张我希望它看起来像什么的图片（并且让它看起来像负边距）：

---

负边缘完全可以。或者，您可以通过绝对和相对定位进行更具编程性的定位

CSS

.container {
  background: crimson;
  height: 600px;
  margin: 0 auto;
  width: 300px;
}

.header {
  background: purple;
  height: 100px;
  left: 0;
  margin: 60px auto;
  padding: 0 30px;
  position: absolute;
  right: 0;
  width: 360px;
}

HTML

<div class='container'>
  <div class='header'></div>
</div>

---

＜P＞＜P＞＜P＞。在这种情况下，负边际是唯一可行的方法（也是我认为可以接受的少数情况之一）。

您还可以探索其他解决方案（例如，将红色bg设置为中央对齐的bg图像，然后将

div

设置为

h1

之外的内容填充），但使用负边距确实没有什么好处，事实上，长期而言，它的可维护性较差

正如已经提出的，您还可以使用定位来解决这个问题（请参见下面的示例）

HTML:

不幸的是，在

h1

之后添加内容似乎会破坏此方法：

此外，如果上述方法确实有效，它不一定比使用负边距更好（它实际上涉及更多CSS）

---

总之，只需使用负边距解决方案，如果使用得当，负边距不一定是坏事，只需在使用它们之前与自己进行思考（有更好的方法来实现您的目标吗？

您可以使用

位置：相对

，然后在

#h1

上使用

左

：

.container {
  width: 400px;
  height: 500px;
  background: red;
  margin: 0 auto;
}

#h1 {
  width: 400px;
  height: 40px;
  left: -30px;
  background: blue;
  padding: 0 30px;
  position: relative;
  top: 40px;
}

---

在

中尝试使用负边距是可以的，唯一的其他方法是使用

位置：绝对

和负

左

值。是的，负边距是这里的方法。好的，我只是想确定没有更好的“正确”方法。谢谢你提供的信息丰富的答案：）没关系：）希望能有所帮助！

<div class="container">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <h1>testing, testing, 1 2 3</h1>
</div>

.container {
    background: #f00;
    margin: 0 0 0 20px;
    padding: 100px 0;
    position: relative;
    width: 400px;
}

h1 {
    background: #00f;
    color: #fff;
    left: -20px;
    padding: 0 20px;
    position: absolute;
    width: 100%;
}

.container {
  width: 400px;
  height: 500px;
  background: red;
  margin: 0 auto;
}

#h1 {
  width: 400px;
  height: 40px;
  left: -30px;
  background: blue;
  padding: 0 30px;
  position: relative;
  top: 40px;
}