关于负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的三层结构是经过实践的黄金三层，能避免各类错位和对不齐。