负边距学习随笔
一、判定边界相邻
文档流中元素的按块元素从上到下，内联元素从左至右依次流入页面，一个元素流入时，会按照与上一个元素的判定边界相邻流入页面，关于此处所说判定边界，并不是单指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变宽，且超出容器宽度。
这是负边距在布局中的第二种应用，即使元素变宽。
