margin为负值时状态判断

margin负值状态判断

margin偏移判断

• top负值就是以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线;
• left负值就是以包含块(Containing block) 内容区域的左边或者左方相连元素 margin 的右边为参考线;
• right负值就是以元素本身border的右边为参考线；
• bottom负值就是以元素本身border的下边为参考线；

margin负值产生的影响

研究三栏布局时得出的结论：当margin为负值时，top、left会向对应方向偏移，bottom、right会向对应方向压缩，影响元素占位大小。当元素margin-right或margin-bottom为负值且等于该盒子大小时，元素相当于不占位。

解释Demo

我们定义一个盒子以监视子元素位置变化，设置盒子大小能装下一个宽为100%的盒子和一个宽为100px的盒子。

<div class="box">
  <div class="regular"></div>
  <div class="resize"></div>
</div>

.box {
  background-color: red;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
.regular {
  background-color: blue;
  width: 100%;
  height: 100px;
}
.resize {
  background-color: yellow;
  width: 100px;
  height: 100px;
}

此时的状态为两个子元素占满位置且由于div为块级元素，两个子元素各占一行。继续设置向左浮动，使两个子元素当占位大小之和小于等于盒子时在一行内。

.regular {
  float: left;
}
.resize {
  float: left;
}

最后设置[class=resize]的子元素margin-right为负值且等于元素大小。

.regular {
  margin-right: -100px;
}

此时发现元素到达上一行。因为此时占位判断相当于margin-right + width = 0px，元素相当于不占位，所以两元素占位相加（100% + 0px = 200px）等于盒子内容大小，所以不用换行。

注意：占位判断计算的是盒子content大小与子元素盒模型大小比较，当为标准盒模型时有padding、border时margin要将padding，border计算到里面