如何解析margin负值的四大应用

这期内容当中小编将会给大家带来有关如何解析margin负值的四大应用，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

向大家介绍一下margin负值的相关应用，主要从四个方面来向大家讲解。

margin负值的相关应用

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

关于页面上背景定位效果，可以参见我的文章“IE6下png背景不透明问题的综合拓展”有关页面上定位的demo实例页面

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

流动性布局又称自适应布局，也称为宽度不固定布局。比如WordPress经典的两栏式不固定布局就是使用的margin负值实现的定位，属于左右margin负值在流动性布局中的应用，有兴趣的同学可以稍微看看框架的样式代码，会学到些东西的。还有一类两栏自适应需要用到margin的上下负值，尤其在一栏高度固定，另外一栏高度不定的两栏或多栏布局中。

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

3.在选项卡等边框线的处理

下图显示的是一种比较常见的选项卡样式，旧版的迅雷首页就是这样子的选项卡。

◆如何用最简介最易维护的CSS代码写出这样的样式效果呢？

我其实已经在图上做了点小小的标注，使用margin-top:-1px;解决选项卡下边框显示的问题。
关于具体如何编写实现此效果，建议您狠狠地单击这里进入demo实例页面，会有所帮助的。

类似的，如果您要用四个div实现5条1像素的左右边框，就像表格一样的效果，就可以使用让每个div都有左右1像素的边框，然后margin-right:-1px;或是margin-left:-1px;让之间的边框重叠，这样就实现了四标签实现5边框的效果了。

4.图片与文字对齐问题

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

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

上述就是小编为大家分享的如何解析margin负值的四大应用了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。