margin负值的相关应用

1.页面上实现css sprite背景定位效果

 

其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的，而差别就在于background-position会自动让区域外的图片部分不显示，所以我们要做的很简单，就是给margin定位的父标签给它定个高宽，然后overflow:hidden让高度宽度之外的区域不显示就行了。

 

2.在流动性布局中的应用

 

流动性布局又称自适应布局，也称为宽度不固定布局。比如WordPress经典的两栏式不固定布局就是使用的margin负值实现的定位，属于左右margin负值在流动性布局中的应用。

<div style="width:200px;float:left;margin-right:-200px;">

     左侧宽度固定

</div>

<div style="background:#888;margin-left:200px;">

     宽度自适应，啦啦啦。。。宽度自适应，啦啦啦。。。宽度自适应，啦啦啦。。。

</div>

还有一类需要用到margin的上下负值，在一栏高度固定，另一栏高度不定的多栏布局中。高度不固定栏和高度固定的栏上下错开，均无浮动属性，高度不固定的栏margin-top一个负值，负值的大小就是高度固定栏的高度，这样，就实现了两栏在同一水平线上。且宽度自适应，由于没有浮动，所以不同担心内部存在clear:both属性，破快浮动。这里没有例子，讲得有点虚，您可以先把这个放一放，因为关于流动性布局（宽度自适应布局）我会好好地写一篇文章的，到时，有关margin负值在流动性布局中的应用我会好好的讲述的。

 

3.文字图片对齐问题

 

图片与文字默认是baseline对齐。所以当图片与文字在一起的时候往往都是不对齐的。尤其图片较小时就更加明显了，我看到很多人使用vertical-align:middle;对齐。在火狐下效果是不错，但是IE下，虽然是效果好了些，但还是不够。

如果，图片是个20像素*20像素左右的小图片，文字也差不多12px大，则使用vertical-align:text-bottom;是不错的个方法。还有个屡试不爽，兼容性不错的方法就是使用margin负值了。img标签是个很不错的标签，支持margin四个方向的正的和负的定位。一般img标签打头的小图标与文字对齐的话，img{margin:0 3px -3px 0;}可以说是公式版的东西，能实现效果和兼容性俱佳的对齐效果。