带有负边距的填充内部元素的容器不起作用

Question

为什么宽度为 100% 的.column2不会以负边距"缩进"自身？

为什么宽度auto.column1会以负边距"凹陷"自己而不是.column2？

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
height: 150px;
width: 450px;
background-color: cyan;
padding: 15px;
}
.column1 {
height: auto;
width: auto;
background-color: red;
margin-left: -15px;
margin-right: -15px;
}
.column2 {
height: auto;
width: 100%;
background-color: green;
margin-left: -15px;
margin-right: -15px;
}

<div class='container'>
<div class='column1'>hello</div>
<div class='column2'>hola</div>
</div>

Answer 1

这并不明显，但可以推断为width: auto和width: 100%之间的区别。

1. 给予container的padding排除了任何保证金崩溃的可能性。

2. 对于column1，因为width是自动的，display是阻塞的，它会填充它拥有的所有可用空间，当在此之上应用负边距时，宽度会自我调整。

3. 对于column2，因为width为 100%，宽度将计算为其包含块的宽度，并对其应用负边距- 但计算width现在无法更改。

请参阅下面的正负margin比较。请注意，在所有情况下，column2的width都是相同的值。

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
height: 150px;
width: 450px;
background-color: cyan;
padding: 15px;
}
.column1 {
height: auto;
width: auto;
background-color: red;
margin-left: -15px;
margin-right: -15px;
}
.column2 {
height: auto;
width: 100%;
background-color: green;
margin-left: -15px;
margin-right: -15px;
}
.container.positive > div {
margin-left: 15px;
margin-right: 15px;
}

Negative margin
<div class='container'>
<div class='column1'>hello</div>
<div class='column2'>hola</div>
</div>
Positive margin
<div class='container positive'>
<div class='column1'>hello</div>
<div class='column2'>hola</div>
</div>