相對而言，margin 負值的使用機率在布局中似乎很少，但是我相信一旦你開始掌握就會著迷，接下來我們看看關于margin負值的一些資料：

• 它是一個有效的屬性，至少w3c中明確描述如下：”Negative values for margin properties are allowed…”;
• margin負值并非hack，正因為不熟悉所以有時候會避而遠之，甚至誤解;
• margin負值遵循文檔流；假如使用margin負值促使一個元素向上位移，那么相關元素也會隨之發生位移。
• 良好兼容，甚至是ie6也能支持。
• 配合浮動精彩不斷；
• DW的視圖模式下看不到它的英姿。

原理

margin負值提供兩種模式：

• 當給一個元素設置margin 負值（top/left）,該元素將在該方向上產生位移。例如：

  ?

  /* 元素向上位移10px */ .demo {margin-top:-10px;}
• 當給一個元素設置margin負值（bottom/right）,這個元素并不會像你所預想的產生位移，而是將任何緊隨其后的元素“拉”過來，覆蓋在自己的上邊。例如：

  ?

  /* 所有緊隨元素demo之后的元素向上位移10px */ .demo {margin-bottom:-10px;}

如果元素沒有設置寬度，那么給該元素設置margin負值(left/right)將會在兩個方向增大其寬度，看起來就好像給該元素添加了padding。

精彩實例

• 三欄顯示（無需浮動及額外標簽）;

  列表過長時，我們一般都會考慮通過浮動來使之顯示為多列，其實換個思路也可以實現。

  實例演示

• 疊加效果；

  最常見的選項卡，當前項選中狀態；

  實例演示

• 兩列流式布局；

  固定寬度的布局so easy,配合浮動輕松搞定兩列自適應布局，三列同理。

  實例演示

• 去除多余的外邊距；

  圖文混排，每行最后一個元素的margin值如何處理？單獨設置類名消0？通過父層來裁切？使用margin負值吧！

  實例演示

• 去除多余的分割線；

  第一個項的分割線如何處理？加類消除？使用margin負值吧！

  實例演示

• 彈出層垂直水平居中；

  經典事例，無需多言！

  實例演示

• 三欄等高；

  經典事例，無需多言！

  實例演示

• 一像素圓角按鈕

  也許你會說滑動門即可，但不妨看看margin負值如何實現吧！

  實例演示

• 殺出重圍；

  分割線 + 模擬padding

  實例演示

• …

Bugfixes

咳咳，據說還有一些Bug，還是看看吧！

• 鏈接會變得不可點擊；
• 文本不太容易選中；
• 圖片將被裁切
• 失去焦點時，通過tab切換鏈接消失。

解決方案：給元素添加相對定位position:relative;即可。

?

margin負值-權威指南：http://blog.163.com/zhengqi_sheng/blog/static/21432319120135494122645/

?

margin負值的應用：http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

轉載于:https://www.cnblogs.com/disneyland/p/4119490.html

總結

以上是生活随笔為你收集整理的初探Margin负值(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。