Question

为什么.column2宽度为100％并非“无效”且负边距？

为什么.column1 auto宽度'不正确'本身带有负边距而不是.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%之间的区别。

padding container排除任何边距折叠。
对于column1 width 自动而display 阻止，填写所有内容它有可用空间，当负边距应用于此时，宽度会自动调整。
对于column2，width为100％，宽度将计算为其包含块的宽度， 负边距会应用于其上 - 但计算出的width现在无法更改。

请参阅下面的肯定和否定 margin之间的比较。请注意，width的{{1}}在所有情况下都是相同的值。

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;
}

.container.positive > div {
  margin-left: 15px;
  margin-right: 15px;
}

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

1 个答案: