本文樣式**採用 scss。你的網頁中，不可能沒有使用過 margin。大多數情況下，我們採用的都是正數的 margin 值，可能有時候會用到負的 margin 值。在我們的印象中，負的 margin 值就類似於瀏覽器的 hack 一樣，不被人接受。但是，本文要說明的就是，負的 margin 值並不是 hack，這是正常範圍內的寫法。瀏覽器相容性為 ie6+。
negative values for margin properties are allowed, but there may be implementation-specific limits. —— w3c根據 w3c，margin 是能夠接受負值的，只是在具體實現上有一些區別。
那麼，設定 margin 為負值究竟會是什麼樣的效果呢？
與設定正值不同，margin 設定負值需要根據設定的方向以及元素是否浮動以及其定位方式來判斷最終的行為。
所以，具體行為按照以下幾種情況說明。
如果元素沒有設定浮動並且沒有設定定位或者position屬性為static的情況下，對元素的 margin 設定負值會有以下的效果：
設定的 margin 的方向為 top 或者 left
當設定負值的 margin 的方向為 top 或者 left 的時候，元素會按照設定的方向移動相應的距離。
比如，設定margin-left: -100px;。 那麼，元素會往左移動 100px。對於設定margin-top也是一樣的道理。
設定的 margin 的方向為 bottom 或者 right
當設定負值的 margin 的方向為 bottom 或者 right 的時候，元素本身並不會移動，元素後面的其他元素會往該元素的方向移動相應的距離，並且覆蓋在該元素上面。
比如，設定margin-right: -100px;。那麼，元素本身並不會移動，後面的元素會向左移動 100px 到該元素上。對於設定margin-bottom也是同樣的道理。
同時，在元素不指定寬度的情況下，如果設定margin-left或者margin-right為負值的話，會在元素對應的方向上增加其寬度。效果就和設定padding-left或者padding-right一樣。
如果元素沒有設定浮動，但是設定了相對定位，設定 margin 為負值的時候，表現如下：
設定的 margin 的方向為 top 或者 left
當設定負值的 margin 的方向為 top 或者 left 的時候，元素也會按照設定的方向移動相應的距離。
設定的 margin 的方向為 bottom 或者 right
當設定margin-bottom/left的時候，元素本身也不會移動，元素後面的其他元素也會往該元素的方向移動相應的距離，但是，該元素會覆蓋在後面的元素上面 (當然，此處說的情況肯定是後面的元素沒有設定定位以及z-index的情況)。
如果元素沒有設定浮動，但是設定了絕對定位，設定 margin 為負值的時候，表現如下：
設定的 margin 的方向為 top 或者 left
當設定負值的 margin 的方向為 top 或者 left 的時候，元素也會按照設定的方向移動相應的距離。
設定的 margin 的方向為 bottom 或者 right
由於設定絕對定位的元素已經脫離了標準文件流，所以，設定margin-right/bottom對後面的元素並沒有影響。
肯定沒有既設定了浮動又設定絕對定位的情況，那樣太荒唐了。對於設定了浮動的元素，設定 margin 為負值的時候，表現如下：設定了浮動的元素，再設定
postion: relative;的話，元素的行為和單獨設定float是一樣的。
如果設定的 margin 的方向與浮動的方向相同，那麼，元素會往對應的方向移動對應的距離。
比如：
.elem如果設定 margin 的方向與浮動的方向相反，則元素本身不動，元素之前或者之後的元素會向鈣元素的方向移動相應的距離。
比如：
.elem如果後面的元素也設定了浮動的話，我們以乙個具體的例子來說明。
.container
.right
}
.left和.right都設定了浮動，在.left上設定了margin-right: -300px;，那麼，.right會向左移動 300px，從而覆蓋在.left上。這種行為與沒有既沒有設定浮動也沒有設定定位的表現類似。
到此，我們把設定負 margin 的各種情況以及在各種情況下的表現都大概了解了一遍。那麼，我們真正運用到實際中會是什麼樣子呢。
原諒我措辭不好，大概就是下圖的效果：
按照一般的思想，肯定是直接給 title 設定絕對定位，然後再將其調整過去。
但是，按照我們現在所說的，其實很簡單就能實現這個效果。
這裡只寫了主要部分的**。
hey this is title!
hah! this is content.
.title
.content
margin-bottom: -30px;，以及margin-left: -20px;。
設定margin-bottom是為了讓 content 向上移動，設定margin-left是為了讓 title 向左移動一小段距離。
還有個需要注意的地方就是，需要給 title 設定position: relative;，根據我們的第二種情況所說的，這樣，才能保證 title 覆蓋在 content 之上。
根據我們的最後一種情況，通過設定 margin 為負值，我們可以很容易的實現一列定寬的兩列流式布局。
.left
.right
這是乙個很老的話題了，以前也有各種實現的方式，比如雙飛翼布局，或者聖杯布局。
我們此處就以雙飛翼布局來作示例。
先設定頁面結構：
然後，我們設定這三列都浮動：
.left,
.right,
.center
.left
.right
.center
margin-left: -100%;margin-left: -400px;其實，這樣設定，我們的三列布局就基本完成了。
那麼，我們為什麼要把 center 放在 left 和 right 之前呢？
這個其實涉及到元素的堆疊順序的知識 (這裡就不詳細講解了，後面有時間的話專門拿一篇文章來講解吧)，此處簡單說明一下。
由於我們的三列都設定了浮動，所以，從某種意義上說，它們三個是在同乙個平面的 (相當於z-index相同)，那麼，這裡就不能根據 css 來判斷堆疊順序了。所以，此處的 html 結構就決定了它們的堆疊順序：所謂後來居上。
我們要讓 left 在 center 之上，所以，肯定需要讓 left 元素放在 center 之前。
所以，三列布局完整的 scss **如下：
.container
.left
.right
.center
}
the definitive guide to using negative margins
雙飛翼布局和聖杯布局的對比
margin為負的理解
margin是盒模型中乙個很重要的概念，是border之外的區域，我們通常稱作外邊距，有margin top,margin right,margin bottom.moargin left四個外邊距。注意我書寫的順序是從上開始順時針的順序。對於這四個值，我們在設定的時候必然只能有4種情況 乙個值 兩...
負margin的理解（一）
之前有在看大牛的部落格，然後看到負margin,會想那個負margin值是怎麼計算出來的，還有啥時候設定負margin是有效果，現在做如下總結 html 結構 div class container div class main wrap h2 main content h2 div div cla...
一些css屬性的理解和運用。
1，彈性容器通過設定 display 屬性的值為 flex 或 inline flex將其定義為彈性容器 常用flex來編寫盒子橫向分布 flex direction屬性指定了彈性子元素在父容器中的位置。flex direction row row reverse column column rev...