關於負margin在微博的應用

關於負margin在微博的應用：

一、去除多餘的margin值
示例截圖：

結構：

關鍵樣式：

說明：bar_pictecxt的寬度是「新吧推薦」的寬度，piclist的寬度是淺藍色塊的寬度，內層的寬度大於外層，因此外層使用margin負。這裏循環dl的外面有兩層div，若是隻用一個div，則IE6須要設置此div的寬度才能兼容，不靈活。
此示例僅僅是margin-right的負值效果，經測試margin-top、margin-left、 margin-bottom均有效，只是IE6針對周圍環境會有數值的較小差異而已。

二、去除多餘的border
示例截圖：

結構：

關鍵樣式：

說明：list_bar_d2_pos是隱藏外層，ul設置margin負，li是循環元素，這是作border隱藏的黃金三層結構，屢試不爽。ul和li只有兩層結構，沒有示例1那樣的三層機構，因此IE6中須要對ul設定寬度，如「_width:742px」。
此示例能夠理解爲示例1的衍生，只是多出來的margin值是看不見的不須要被隱藏，而border是可見的，須要一個外層來隱藏。
此示例僅僅是margin-right的負值效果，經測試margin-bottom也有效，只是IE6下須要去除循環元素的浮動，overflow:hidden的外層加上zoom:1。

三、衝破padding的侷限
示例截圖：

結構：

關鍵樣式：

說明：微吧右側有不少模塊，爲了不每一個模塊都寫padding值，或者給每一個模塊都套一個有padding值樣式的外層，咱們選擇給右側外層寫一次padding值便可，因此像分割線這種沒有padding值的模塊須要使用margin負來實現。
有了示例一、2的描述，這個就很簡單了，一層結構，直接margin負便可解決。
可是IE6的事兒比較多，若是W8_linebox這個層有padding-left和padding-right的取值時，或者W8_linebox內部還包含有浮動的內容，則IE6就會出問題，解決辦法依然是給IE6寫寬度。

四、合併border
示例截圖：

結構：

關鍵樣式：

說明：當左右容器高度均可變，又要知足共享邊框線的UI設計時，除了給大容器一個縱向平鋪的背景圖以外，margin負值又能發揮做用了。
以上說的都是父元素和子元素之間使用margin負值，而此示例是兩個兄弟元素之間某一個使用margin複製，IE6又來找事了，多出來的部分直接消失了，解決辦法是給IE6寫position:relative;zoom:1;
這種方法也常常用在標籤切換的tabs中，用來隱藏兩個元素之間的邊線。初學者容易把此示例跟示例2的處理方式混淆，仔細推敲會發現相差勝遠吧。

五、調皮的箭頭
示例截圖：

結構：

關鍵樣式：

說明：兩個i標籤是實現尖角的，字符圖標，可換膚。comment是評論展開框，arrow是尖角，comment_inner是評論框主要內容。 margin負值的基本原理相似示例1，但對像素和兼容瀏覽器稍微費點勁。arrow的三層結構是經過實踐的黃金三層，能避免各類錯位和對不齊。