解析margin负值的四大应用

开发 前端
margin为CSS中非常常用的一个属性,其所包含的内容也是很多的,这里向大家描述一下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兼容性解决十大技巧

 

责任编辑:佚名 来源: css3-html5.com
相关推荐

2010-11-22 15:25:08

2021-04-12 16:00:18

工业物联网物联网

2023-03-14 12:44:37

ChatGPT数字化转型

2009-02-27 13:07:00

服务器解析基本特性

2010-07-01 14:13:51

UML时序图

2019-03-14 09:47:50

Facebook宕机网络攻击

2011-11-02 09:41:15

2011-03-21 09:01:49

CSS框架

2015-07-17 09:50:16

Carthage优劣比较

2010-07-05 09:48:00

UML类关系图

2010-07-14 14:46:57

Perl操作符

2010-09-10 09:22:50

DIV布局

2010-07-06 10:30:58

UML关系图

2010-08-13 14:45:58

Flex4布局

2010-07-05 11:12:43

常用UML图

2010-08-17 09:20:28

DIV布局

2018-01-22 08:18:47

混合云云应用多云

2024-07-30 21:47:50

2018-01-02 12:20:23

农业大数据农产品

2010-08-03 21:59:56

点赞
收藏

51CTO技术栈公众号