浅谈页面里margin负值

你一直在做各种项目来满足各种需求，但是你的代码能力提高了吗？虽然持续的项目经验可以增加你的代码行数，但它可能不会提高你的代码质量。因此，除了施工阶段的代码扣除外，项目后的代码总结也非常重要。

除了模块化、公共和皮肤元素处理外，微吧还有很多可以总结的东西，如：
1、字符图标:全站大部分纯色功能图标都是用字符实现的，节省了图片字节，有利于修改和换肤。
2、feed的改造和扩展：基本feed、图片带打开收集功能，扩展视频音乐丰富的文本功能，扩展到带时间轴和PK模式的feed，代码清晰可扩展。
3、各种margin负值：使用postion定位的样式减少了很多，PHP输出的判断也尽量减少了。
4、图片的拼合和优化：根据页面拼合图片，每张图片都通过Smush.优化it，用png8格式替换ie6图片的gif格式。

下面只选择“各种margin负值”来描述我在项目建设和总结过程中的一点经验。margin负值大家肯定都不陌生，百度一搜N多数据，都是大同小异的几点。在微吧的应用中，margin负值无法逃脱这些点，但我想从一个新的角度来描述。

1、去除多余的margin值
示例截图：

代码结构：

1. <div class=”bar_box”>
2.   <div class=”bar_box2″>
3.     <dl>…</dl>
4.     <dl>…</dl>
5.     <dl>…</dl>
6.     <dl>…</dl>
7.     <dl>…</dl>
8.     <dl>…</dl>
9.     <dl>…</dl>
10.    </div>
11. </div>

CSS风格：

1. .bar_box{margin:0 -39px 14px 0;}
2. .bar_box dl{_display:inline;float:left;width:80px;height:108px;margin:0 39px 17px 0;overflow:hidden;}

说明：bar_box的宽度是“新吧推荐”的宽度，bar_box2的宽度是浅蓝色块的宽度，内层比外层宽，所以外层为margin负。循环dl外有两层div，如果只使用一个div，那么IE6需要设置这个div的宽度才能兼容，不灵活。
这个例子只是margin-right的负值效果，已经测试了margin-top、margin-left、 margin-bottom是有效的，但IE6对周围环境的价值差异很小。

2、去除多余的border
示例截图：

结构：

1. <div class=”list_bar_d2_pos”>
2.   <ul>
3.     <li>…</li>
4.     <li>…</li>
5.     <li>…</li>
6.     <li>…</li>
7.    </ul>
8. </div>

CSS风格：

1. .list_bar_d2_pos{overflow:hidden;}
2. .list_bar_d2_pos ul{_width:742px;marigin:0 -36px -30px -25px;}
3. .list_bar_d2_pos li{float:left;padding:0 26px 31px 26px;overflow:hidden;line-height:21px;}

说明：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的外层加zoomm:1。

3、冲破paddding的局限性
示例截图：

结构：

1. <div class=”w8_linebox”></div>

CSS风格：

1. .w8_linebox{height:1px;margin:0 -15px 18px -13px;background:#e8e8e8;overflow:hidden;}

注:微吧右侧有很多模块。为了避免每个模块都写padding值，或者为每个模块设置一个具有padding值风格的外层，我们选择在右外层写padding值。因此，没有padding值的模块，如分割线，需要使用madin负来实现。
有了示例1、这个描述很简单，一层结构，直接margin负就可以解决。
但是IE6有很多东西，如果W8_linebox有padding-left和padding-right取值时，或者W8_linebox内部还包含浮动内容，那么IE6就会出问题，解决办法还是给IE6写宽度。

4、合并border
示例截图：

结构：

1. <div class=”list_feed_pk_box clearfix”>
2.   <div class=”list_feed_pk_f list_feed_pk_fl”>
3.      <div>…</div>
4.      <ul class=”list_feed_pk”>…</ul>
5.    </div>
6.     <div class=”list_feed_pk_f list_feed_pk_fr”>
7.        <div>…</div>
8.        <ul class=”list_feed_pk”>…</ul>
9.    </div>
10. </div>

CSS风格：

1. .list_feed_pk_fr .list_feed_pk{_position:relative;_zoom:1;margin:0 0 0 -1px;}

注：当左右容器的高度可变且需要满足共享框架线的UI设计时，除了给大容器一个垂直平面的背景图外，margin的负值也可以再次发挥作用。以上都是父元素和子元素之间使用margin的负值，这个例子是两个兄弟元素中的一个用margin复制，IE6又来找麻烦了，多余的部分直接消失了。解决办法是给IE6写position。:relative;zoom:1;

这种方法通常用于标签切换tabs，以隐藏两个元素之间的边缘。初学者很容易混淆这个例子和示例2的处理方法。仔细考虑，你会发现差别很大。

5、调皮的箭头
示例截图：

结构：

1. <div class=”comment w8_linecolor w8_bgcolorb”>
2.   <div class=”arrow”>
3.      <div class=”inner”>
4.          <i class=”w8_fonticons w8_linecolor_fc”>w</i>
5.         <i class=”w8_fonticons w8_bgcolorb_fc>w</i>
6.      </div>
7.    </div>
8.    <div class=”comment_inner”>…</div>
9. </div>
10. <div class=”clear”></div>

CSS风格：

1. .list_feed .arrow{margin-top:-23px;}
2. .list_feed .arrow .inner{width:25px;height:23px;}
3. .list_feed .arrow i{display:block;width:25px;height:15px;*height:auto;font-size:28px;text-align:center;line-height:normal;}
4. .list_feed .arrow i.w8_bgcolorb_fc,
5. .list_feed .arrow i.w8_bgcolor_fc{margin:-14px 0 0;*margin:-32px 0 -15px;_margin:-32px 0 4px;}

注：两个i标签实现尖角，字符图标，可换肤。comment是评论展开框，arow是尖角，comment_inner是评论框的主要内容。margin负值的基本原理与示例1相似，但对于像素和兼容浏览器来说有点困难。arow的三层结构是实用的黄金三层，可以避免各种错位和不均匀。

练习真正的知识，研究一个看似简单的属性需要大部分时间。你觉得值得吗？反正我觉得值得。最后祝大家写代码少纠结，多清晰。

source：微博UDC