负边距学习随笔

一、判定边界相邻

 文档流中元素的按块元素从上到下，内联元素从左至右依次流入页面，一个元素流入时，会按照与上一个元素的判定边界相邻流入页面，关于此处所说判定边界，并不是单指border，而是margin影响后，后一个元素流入时的判定边界（正margin则border加上该值，负margin则减去该值），如下例所示：

• 元素1有margin-right=10px，元素2无margin-left:

元素1margin-right=10px,元素2margin-left=0px

 元素2流入时，其判定边界（border+0=border）与元素1的判定边界（border+10px）相邻。所以中间即是元素1的margin-right。

• 元素1有margin-right=10px，元素2有margin-left=10px:

元素1margin-right:10px;元素2margin-left:10px

 元素2流入时，其判定边界（border+10px）与元素1的判定边界（border+10px）相邻，中间的20px即为元素1的margin-right和元素2的margin-left。

二、负边距改变元素在文档流中位置

 当margin值为负数时，元素流入依然遵循以上原则，从而可以改变元素在文档流中位置。

• 元素1margin-right:-10px;元素2无margin-left：

元素1margin-right:-10px;元素2无margin-left

 图中，看似元素1宽度减少（10px）,实则不然，设置元素2的opacity:0.5:

元素2的opacity:0.5

 显然，元素1宽度并未减小，而是元素2流入页面时，元素2的判定边界（border+0px）与元素1的判定边界（border-10px）相邻，所以表现为元素2在流中向左移动了10px,元素1并未变窄，只是有10px的领域变成了与元素2的共享领域。
 这成为了负边距在布局中的一个应用，即改变元素位置（注：与position:relative不同，负边距改变位置的元素不会再占据原来位置）；

三、负边距增加元素宽度

 除了改变元素位置之外，负边距在布局中的另外一项应用就是增加元素宽度。

• 外层div固定宽度，内层div不设定width、margin

  
  外层固定，内层不设width、margin
• 内层div，margin:0 50px:

内层margin:0 50px;

 此时内层div左右各收缩50px，表现为元素缩小。

• 内层div,margin:0 -50px:

  
  内层div,margin:0 -50px
  

   此时，依然判断边界相邻，内层div的判定边界（border-50px）与外层div的判断边界（border+0）相邻，表现为内层div变宽，且超出容器宽度。
   这是负边距在布局中的第二种应用，即使元素变宽。

1. CSS布局奇淫巧计之-强大的负边距

2. 负值之美：负margin在页面布局中的应用