html - CSS负边距以对抗包装元素填充

Question

为什么分配给 .alert 类的负边距不起作用。我希望 .alert 类占据容器的整个宽度。我不想为所有元素分配单独的填充，因为只有 .alert 元素必须占据 .outer 容器的整个宽度。所有其他元素都应该有一个分配给外部容器的填充。

.outer{
  padding: 20px;
  background: red;
  margin: auto;
}

.alert{
  height: 20%;
  width: 100%;
  background: blue;
  margin: -20px -20px 0 -20px;
  color: white;
  padding: 10px;
}

.other{
  background: yellow;
  padding: 10px;
}

<div class="outer">
  <div class="alert">Hello! This is an alert</div>
  <div class="other">Content. Lorem ipsum blah blah blah</div>
  <div class="other">Content. Lorem ipsum blah blah blah</div>
  <div class="other">Content. Lorem ipsum blah blah blah</div>
  <div class="other">Content. Lorem ipsum blah blah blah</div>
  <div class="other">Content. Lorem ipsum blah blah blah</div>
</div>

Answer 1

width: 100% 使 .alert 的内容区域与其包含 block 一样宽，由 .outer 建立。您希望它通过负边距增长，但是 width 声明阻止了扩大。请改用默认的 width: auto。

.outer {
  padding: 20px;
  width: 80%;
  background: red;
  margin: auto;
}
.alert {
  height: 20%;
  background: blue;
  margin: -20px -20px 0 -20px;
  color: white;
  padding: 10px;
}
.other {
  background: yellow;
  padding: 10px;
}

<div class="outer">
  <div class="alert">Hello!</div>
  <div class="other">Content</div>
  <div class="other">Content</div>
  <div class="other">Content</div>
  <div class="other">Content</div>
  <div class="other">Content</div>
</div>