231
前端開發：微吧裏的各種margin負值
一直在做各種項目接各種需求，但你的代碼能力得到提高了嗎?不停的項目經曆雖然能夠增加你的代碼行數，但不一定能提升你的代碼質量，所以除了構建階段的代碼細扣，項目之後的代碼總結是至關重要的。
微吧中除了模塊化、公用和皮膚元素處理外，還有很多可總結的東西，例如：
1、字符圖標：整站大部分純色的功能性的圖標都是用字符實現的，節省了圖片字節，利於修改和換膚。
2、feed的改造和擴展：基礎feed、圖片帶打開收起功能、擴展了視頻音樂富文本功能、又擴展成帶時間軸和PK模式的feed，代碼清晰可擴展性強。
3、各種margin負值：減少了很多用postion定位的樣式，盡量的減少了PHP輸出的判斷工作。
4、圖片的拚合和優化：按頁麵拚合圖片，每張圖片都通過Smush.it進行優化，給IE6用的圖片采用png8格式替換gif格式。
下麵僅選“各種margin負值”這一點描述一下我在項目構建和總結過程中的一點心得。margin負值大家肯定不陌生，百度一搜出來N多資料，都是大同小異的幾點。margin負值在微吧的應用中也逃離不了這幾點，不過我想從一個新的角度來描述。
1、去除多餘的margin值
示例截圖：
結構：
關鍵樣式：
說明：bar_pictecxt的寬度是“新吧推薦”的寬度，piclist的寬度是淺藍色塊的寬度，內層的寬度大於外層，所以外層使用margin負。這裏循環dl的外麵有兩層div，如果隻用一個div，則IE6需要設置此div的寬度才能兼容，不靈活。
此示例僅僅是margin-right的負值效果，經測試margin-top、margin-left、 margin-bottom均有效，隻是IE6針對周圍環境會有數值的較小差別而已。
2、去除多餘的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。
3、衝破padding的局限
示例截圖：
結構：
關鍵樣式：
說明：微吧右側有很多模塊，為了避免每個模塊都寫padding值，或者給每個模塊都套一個有padding值樣式的外層，我們選擇給右側外層寫一次padding值即可，所以像分割線這種沒有padding值的模塊需要使用margin負來實現。
有了示例1、2的描述，這個就很簡單了，一層結構，直接margin負即可解決。
但是IE6的事兒比較多，如果W8_linebox這個層有padding-left和padding-right的取值時，或者W8_linebox內部還包含有浮動的內容，則IE6就會出問題，解決辦法依然是給IE6寫寬度。
4、合並border
示例截圖：
結構：
關鍵樣式：
說明：當左右容器高度都可變，又要滿足共享邊框線的UI設計時，除了給大容器一個縱向平鋪的背景圖之外，margin負值又能發揮作用了。
以上說的都是父元素和子元素之間使用margin負值，而此示例是兩個兄弟元素之間某一個使用margin複製，IE6又來找事了，多出來的部分直接消失了，解決辦法是給IE6寫position:relative;zoom:1;
這種方法也經常用在標簽切換的tabs中，用來隱藏兩個元素之間的邊線。初學者容易把此示例跟示例2的處理方式混淆，仔細推敲會發現相差勝遠吧。
5、調皮的箭頭
示例截圖：
結構：
關鍵樣式：
說明：兩個i標簽是實現尖角的，字符圖標，可換膚。comment是評論展開框，arrow是尖角，comment_inner是評論框主要內容。margin負值的基本原理類似示例1，但對像素和兼容瀏覽器稍微費點勁。arrow的三層結構是通過實踐的黃金三層，能避免各種錯位和對不齊。
實踐出真知，一個看似簡單的屬性研究起來也得花費大半天的功夫，你覺得值嗎?反正我覺得值。最後祝大家寫代碼的時候少一點糾結，多一點清澈
最後更新：2017-04-02 15:14:47