带有负边距的填充内部元素的容器不能正常工作

Question

为什么.column2具有100％的宽度不会“负出”本身，而负边距？

为什么.column1与auto宽度'out-dent'本身具有负边距而不是.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. 的padding给container排除了任何保证金崩溃。

2. 对于column1作为width是自动和display是块，它填满所有可用空间它具有和当缘阴性都在此之上，宽度自调整施加。

3. 对于column2作为width为100％，宽度将计算其包含块和缘阴性是在它施加的宽度 - 但是计算的width现在不能改变。

参见正和负margin下面s之间的比较。请注意，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>