task0001第六部分之负边距

负边距

之前对负边距没有理解，网上搜索了一些资料，解答了一些疑问。

移动位置

设置了负边距能生效的元素会有以下移动的规律：

marin-left（或margin-top）：元素会沿水平（或垂直）方向根据设置的值自身位置发生移动。left为负时就是往左方向移动，top就是往上移动。
margin-right（margin-bottom）：它不会移动该元素(该元素不变化)，但会使该元素后面的元素往前移动。

有很多地方写着分了几类来讨论，分为static元素和浮动或者没脱离文档流和脱离文档流…..但是试验了一下设置了浮动和绝对定位它们的margin负值移动规律都是如上。浮动的情况是有点小差别，在后文中详谈，设置了绝对定位和浮动本身就已经触发了BFC，不会对其他的文档流的元素造成影响，所以它设置right和bottom并不会让后面的元素往前移动。所以我得出了这个结论：负边距移动的规律是在它能够生效的地方都是如此……..万一除了多个浮动div相邻，有其他特例….( ^_^ )请麻烦留言告诉我，谢谢

html：
<div class="left">left</div>
css：
  .left{
           width: 100px;
           height: 300px;
           /*margin-bottom:-100px;*/
           margin-right: -100px;
           background-color: #77BBDD;
       }

以上这两个右边和下边的负边距设置方法都没有让div改变原来的位置。

而设置另外两个：

 .left{
           width: 100px;
            height: 300px;
            /*margin-left: -50px;*/
           margin-top:-150px;
           background-color: #77BBDD;
       }

向左了50px ：

向上了一半 也就是150px：

例外情况

对于多个div都浮动的情况下而言，负边距让它移动的情况有些许区别。

两个div，一个设置宽度100%，高度一定;一个设置定宽定高，没有设置负边距时：

给底下的right块设置margin-left刚刚好为它的宽度值：

html：
<div class="left">left</div>
<div class="right">right</div>
css：
   .left{
           width: 100%;
            height: 300px;
            float: left;
           /*margin-right: -100px;*/
              /*两个注释地方选一解除注释，出现效果相同*/
           background-color: #77BBDD;
       }
        .right{
           width: 100px;
            height: 300px;
           float: left;
            /*margin-left: -100px;*/

所以到这里总结一下这个结论：多个浮动元素相邻，设置margin左负值可以让元素向上一行，就像文字折行一样。而除此之外，其他的情况是仅在水平或者垂直方向上移动。

那这样一来就能发现负边距在双飞翼，圣杯布局，还有水平居中使用相对定位时候起到了很大的作用。

查阅网络资料的时候还发现了有的地方提到负边距可以让元素宽度增加，不定宽度的元素，在左右方向设置了margin-left或者margin-right都会让元素宽度往该方向增加。垂直方向失败，因为高度适应了文字内容。

具体关于负边距的应用似乎原理都是依据负边距的移动的规律，嗯…..

http://www.cnblogs.com/dolphinX/p/4071725.html
搜索时候，看到这篇文章中讲解了很多负边距的应用，觉得很不错~