初探Margin負值(轉)

相對而言，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