解析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;}可以说是公式版的东西，能实现效果和兼容性俱佳的对齐效果。

【编辑推荐】

1. CSS中margin常见问题解决方案
2. CSS margin-top属性速查手册 
3. CSS样式表高效使用八大秘诀
4. 解决IE6下margin双倍边距问题
5. IE6中常见CSS兼容性解决十大技巧

网站栏目：解析margin负值的四大应用
文章路径：http://www.shufengxianlan.com/qtweb/news4/153754.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联