解析margin负值的四大应用

时间:2015-5-26 19:52:21   作者:互联网   来源:互联网转载   阅读:85   评论:0
内容摘要:  本文向大家介绍一下margin负值的相关应用,主要从四个方面来向大家讲解,相信本文介绍一定会让你有所收获。  margin负值的相关应用  1.页面上实现CSSsprite背景定位效果  关于页面上背景定位效果,可以参见我的文章“IE6下png背景不透明问题的综合拓展”有关页面上定位的dem...

  本文向大家介绍一下margin负值的相关应用,主要从四个方面来向大家讲解,相信本文介绍一定会让你有所收获。

  margin负值的相关应用

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

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

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

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

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

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

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

  ________解析margin负值的四大应用

  ◆如何用最简介最易维护的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;}可以说是公式版的东西,能实现效果和兼容性俱佳的对齐效果。


标签:解析 负值 四大 应用 

免责申明:

站内素材文件均整理自互联网,仅供个人学习参考使用,请勿用于商业用途,如您喜欢请购买正版

站内资源除部分为本站原创外皆由网上搜集和整理,若无意中侵犯到您的权利,敬请告之(QQ:2390986128)敬请告之,我们将在48小时内删除。知识产权声明】【★下载说明★】

图库精选

全站地图