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
搜索時候，看到這篇文章中講解了很多負邊距的應用，覺得很不錯~