margin负值的相关应用

1.页面上实现css sprite背景定位效果
 
其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的,而差别就在于background-position会自动让区域外的图片部分不显示,所以我们要做的很简单,就是给margin定位的父标签给它定个高宽,然后overflow:hidden让高度宽度之外的区域不显示就行了。
 
2.在流动性布局中的应用
 
流动性布局又称自适应布局,也称为宽度不固定布局。比如WordPress经典的两栏式不固定布局就是使用的margin负值实现的定位,属于左右margin负值在流动性布局中的应用。
<div style="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;}可以说是公式版的东西,能实现效果和兼容性俱佳的对齐效果。
原文地址:https://www.cnblogs.com/chuangweili/p/5163151.html