我知道你不知道的负Margin

现如今，负margin技术的应用可谓越来越广，任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一，许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。

负margin理论：

在说明什么是负margin之前，你得清楚margin是个啥么玩意，如果还不清楚可以先阅读本人的前一篇文章《不要告诉我你懂margin》，预补下知识，回头再读这篇文章，相信俩篇文章都能给你带来不少的收获。

为了形象、易懂的解释负margin，我们将引入W3C上没有的参考线的说法。何谓参考线？参考线就是 margin移动的基准点，此基准点相对于box(自身)是静止的。而margin的数值，就是box相对于参考线的位移量。

一个完整的margin属性是这么写的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。margin的位移方向是指margin数值为正值时候的情形，如果是负值则位移方向相反。

上面段文字和图片或许挺难理解，我们来看实际代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Margin参考线举例说明</title>

<style type="text/css">

*{margin:0; padding:0;}

.wrap{width:400px; border:5px solid #aaa;}

.example{width:200px; height:200px; background:#CCCCFF;}

.normal{width:200px; height:200px; background:#CCE8CF;}

/* 添加或者注释掉下面的margin属性，查看前后差别

.example{margin:-10px 20px -30px 40px;}

*/

</style>

</head>

<body>

<div class="wrap">

  <div class="example">example元素：margin参考线举例说明文字，请查看此元素由于margin的变化所移动的位移量。</div>

  <div class="normal">一个普通的Box</div>

</div>

</body>

</html>

来分析这段代码，example元素下方有一相邻元素normal（注：这里分析的是添加和删除margin后的example元素，normal元素仅作为example元素前后效果的参照）。

根据上文的参考线原理margin:-10px(top) 20px(right) -30px(bottom) 40px(left); 上-10px和左40px将以外元素为参考，所谓外元素就是本元素的边界元素（再白话点的解释就是元素的紧邻元素，这里涉及到containing block知识，可自行网上搜索）。example元素上边和左边的边界元素即为wrap父元素，wrap父元素为基准点，example的margin-top为-10px，想象下如果这里margin-top为+10px会什么情况，没错如果为+10px，example元素相对于wrap父元素边缘为基准，那么example元素会同wrap父元素10px产生间隙边距，那么反过来，margin-tip:-10px;还是与wrap父元素边缘为基准，反过来向上推10px的距离位置。example元素的margin-left为40px，这里就按照正常逻辑相隔40px边距，同理如果为-40px，那么就是反方向向左推进40px的距离位置。

再来看example元素的margin-right和margin-bottom，由上文得知这俩个值是以元素本身为参考。什么叫以元素本身为参考呢，确切含义是指以自身为参考来影响周围元素的位置（实质即为影响下边和右边相邻元素的参考线）。这里的margin-bottom为-30px，对于其自身位置没有任何变化，但是对于其下方元素normal元素产生了极大的影响，因为normal元素的上边界元素即为example元素，根据example元素边界来判定自身位置，想象下如果example元素margin-bottom为+30px，那么example元素将隔开下方的normal元素，反之为-30px，下方normal元素由于example参考线内凹，导致了normal元素自个儿身不由己的被“提”了上去了。这就是以自身为参考影响周围元素位置的含义。

这里梳理一下规律，当margin四个值都为正数值的话，那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。如果你再想深入了解参考线理论的话你也可访问由浅入深漫谈margin属性这篇文章。

负margin实战：

据我所知至今没有一套完整的关于负margin专题研究的文章。有也仅仅是偏理论或者偏实例，理论终究是理论，学以致用才是根本，而有了实例你还得知晓原理，授人鱼不如授人以渔。接下来我们将利用四个例子深入讲解负margin技术的应用领域。

负margin在Tab选项卡中的应用：

效果预览：

前端
实战
交互
优化

这是第一个选项卡的内容，现如今，负margin技术的应用可谓越来越广，任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一，许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。

核心分析：

如上面的这个Tab选项卡效果，最核心的就是下方俩行高亮部分代码，第二行的margin-bottom:-1px;使下方的正文部分向上“提”了1px的距离，从而达到了鼠标上移后选项卡白色遮住下方黑色边框的效果（注：由于IE不是符合W3C标准，所以当鼠标移到选项卡上时需要添加一个额外属性position:relative;来修复IE不覆盖下方边框的这个Bug）。第四行的margin-left:-1px;的目的是让四个选项卡向左移动1px的距离，达到左右都只有一条分割线的效果。

CSS代码：

.demoTab{width:400px; font:14px/1.5 Microsoft YaHei,verdana,Helvetica,Arial,sans-serif;}

.demoTab .demoTabHd{margin-bottom:-1px; border:1px solid #6C92AD; border-bottom:none; background:#EAF0FD;}

.demoTab .demoTabNav{height:28px; overflow:hidden; *zoom:1;}

.demoTab .demoTabList{float:left; margin-left:-1px;  padding:0 22px; line-height:28px; border-left:1px solid #6C92AD; border-right:1px solid #6C92AD;  font-weight:bold; color:#005590; text-align:center; cursor:pointer;}

.demoTab .demoTabList.current{position:relative; background:#fff;}

.demoTab .demoTabBd{border:1px solid #6C92AD;}

.demoTab .demoTabBd .roundBox{padding:15px;}

.demoTab .demoTabContent{display:none;}

.demoTab .demoTabContent.current{display:block;}

HTML代码：

  <div id="demoTab" class="demoTab">

    <div class="demoTabHd">

      <ul class="demoTabNav clearfix">

        <li class="demoTabList current">前端</li>

        <li class="demoTabList">实战</li>

        <li class="demoTabList">交互</li>

        <li class="demoTabList">优化</li>

      </ul>

    </div>

    <div class="demoTabBd">

      <div class="roundBox">

        <div class="demoTabContent current">这是第一个选项卡的内容。</div>

        <div class="demoTabContent">这是第二个选项卡的内容。</div>

        <div class="demoTabContent">这是第三个选项卡的内容。</div>

        <div class="demoTabContent">这是第四个选项卡的内容。</div>

      </div>

    </div>

  </div>

负margin负位移技术应用：

效果预览：

核心分析：

上面那个类似于商城热销商品邮戳效果其实也是由负margin实现的，把以往使用的relative/absolute这样的“危险”属性代替为相对“温和”的margin属性。核心在于小的邮戳图片利用负margin-top向上移动，达到类似absolute的叠加效果。

CSS代码：

.demoSpecItem{width:212px; min-height:178px; _height:178px;}

.demoSpecItem .demoItemPic{display:block; text-align:center;}

.demoSpecItem .demoItemPic img{padding:5px; border:1px solid #ccc;}

.demoSpecItem .demoIcon{display:block; margin:-185px 0 0 150px;}

HTML代码：

  <div class="demoSpecItem">

    <a href="javascript:void(0)" class="demoItemPic">

      <img width="200" height="166" src="toygersKittens.jpg" alt="toygers kittens" />

    </a>

    <span class="demoIcon"><img width="54" height="54" src="buyInSoon.png" alt="icon" /></span>

  </div>

利用负margin制作鳞片式导航：

效果预览：

鳞片导航
前端开发
用户体验
实战为主

核心分析：

鳞片式导航可以说是使用负margin技术最佳场合之一。如上方的例子，试着想象不使用负margin，单纯的使用图片来制作这类鳞片式导航，想象下切图、定位、点击后图片切换、中间接壤部分的遮罩、维护开发的工作量，光想想这些就不寒而栗。而利用负margin这里仅仅添加一个margin-left即可达到前后遮盖的效果。

CSS代码：

.demoNav .demoList{float:left; width:154px; height:53px; margin:0 0 0 -20px;}

.demoNav .demoList.firstList{margin:0;}

.demoNav .demoList a{display:block; line-height:53px; padding:0 0 0 25px; color:#005590; background:url("flakeNavTab.png") left top no-repeat; font-weight:bold; text-decoration:none;}

.demoNav .demoList a:hover{background:url("flakeNavTabHover.png") left top no-repeat;}

.demoNav .demoList.current a{background:url("flakeNavTabCurrent.png") left top no-repeat;}

.demoNav .demoList.current a:hover{background:url("flakeNavTabCurrent.png") left top no-repeat;}/* fix ie6 hover issue */

HTML代码：

  <div id="demoNav" class="demoNav">

    <ul class="clearfix">

      <li class="demoList firstList current"><a href="javascript:void(0)">鳞片导航</a></li>

      <li class="demoList"><a href="javascript:void(0)">前端开发</a></li>

      <li class="demoList"><a href="javascript:void(0)">用户体验</a></li>

      <li class="demoList"><a href="javascript:void(0)">实战为主</a></li>

    </ul>

  </div>

利用负margin制作自适应左右布局：

效果预览：

负margin能够替代float浮动布局，进行左右布局规划，并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。现如今，负margin技术的应用可谓越来越广，任一个大型站点惊鸿一瞥之下都会有其身影所在。

核心分析：

如上例这类布局效果（左边一个固定图片，右边为内容），负margin能够替代float浮动布局，进行左右布局规划，并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。你或许也发现了第三个“不设置最小宽度”按钮，这个是做什么用的呢？你可以使用标准浏览器查看上方例子，依次点击变宽按钮至宽度最大，再点击不设置最小宽度按钮，你会发现出现了一个Bug。负margin用作布局效果的确有其独到之处，但自身也有一个小的缺陷，即如果内部最后一个子元素使用负margin上移后，由于父元素是其边距元素，其实际高度由于内部子元素上移也会跟着变小。解决方式就是设置一个最小高度，最小高度值为较小的固定元素高度（此例即为左边固定的图片高度），就可彻底解决负margin上移影响父元素高度Bug。

CSS代码：

.demoLayout{width:500px; border:1px solid #aaa; background:#EEEEEE;}

.demoLayout .roundBox{padding:10px; min-height:170px; _height:170px;}

.demoLayout .demoShowPic img{padding:1px; border:1px solid #DAA520;}

.demoText{margin:-170px 0 0 215px;}

.demoLayoutBtn{margin:15px 0 0 0;}

HTML代码：

  <div id="demoLayout" class="demoLayout">

    <div class="roundBox">

      <div class="demoShowPic"><img width="200" height="166" src="toygersKittens.jpg" alt="toygers kittens" /></div>

      <div class="demoText">利用负margin制作自适应左右布局</div>

    </div>

  </div>

结论：

根据上面的几个实例，相信你已经对负margin技术有了一个比较完整的理解。负margin不但可以做出一般CSS属性所不能达到的效果还能够化繁为简、化腐朽为神奇之奇效，当然负margin用到的地方不仅仅是这些，还有许多效果都是需要负margin技术来实现的，只要你耐心的去实践去探索，相信你会发现更多负margin用到得场合。

我知道你不知道的负Margin的更多相关文章

负margin新解
第一篇我知道你不知道的负Margin 分类: Html/CSS | 转载请注明: 出自海玉的博客本文地址: http://www.hicss.net/i-know-you-do-not-know ...
关于元素加上margin属性后以谁为基准移动的问题及负margin的问题
突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...
用margin还是用padding？（3）—— 负margin实战
看过一篇文章是关于我知道你不知道的负Margin,里面对margin做了总结: 当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距.当元素margin的top和left ...
负margin的移位参考线
同早年~ 问题描述在xx项目中,羊城通卡号的输入框处使用了xx库中的实现方式,即将提示文字标签<label>通过负margin移位到<input>框的下面.静态时展现良好,j ...
负margin的原理以及应用
负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...
负margin小记
static元素 margin-top/left负值,元素向指定方向移动, margin-bottom/right负值,元素不动,后续元素前移 float元素左浮, ...
[转]关于负margin在页面中布局的应用
本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...
负margin一些奇葩的布局技巧
copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> &l ...
负margin使用权威指南
自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...

随机推荐

50个php程序性能优化集锦
1. 用单引号代替双引号来包含字符串,这样做会更快一些.因为 PHP 会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有 echo 能这么做,它是一种可以把多个字符串当作参数的" ...
python3 scrapy+Crontab部署过程
背景最近有时间想学习下python3+scrapy,于是决定写一个小程序来练练手. 开发环境:MacOS High Sierra(10.13.1)+python3+scrapy. 开发工具:PyCh ...
【NOIP2015提高组】跳石头
https://www.luogu.org/problem/show?pid=2678 最小值最大问题,二分答案.每次检查是否能仅移走m块岩石使得所有跳跃距离均大于等于mid. #include &l ...
git以及github的初级入门（一）
本身学习git的操作是没什么兴趣的,毕竟原本是win平台学的java开发,git下那么多复制的命令行操作确实比较让人头疼,直到昨天我打开计算机的时候,我放置项目的E盘,以及F盘,G盘盘符都不见了!!我 ...
Python爬虫学习之使用beautifulsoup爬取招聘网站信息
菜鸟一只,也是在尝试并学习和摸索爬虫相关知识. 1.首先分析要爬取页面结构.可以看到一列搜索的结果,现在需要得到每一个链接,然后才能爬取对应页面. 关键代码思路如下: html = getHtml(& ...
JNI参考的资料
1.Android JNI和NDK学习(09)--JNI实例二传递类对象 http://www.cnblogs.com/skywang12345/archive/2013/05/26/3093593 ...
Android Things 专题6 完整的栗子：运用TensorFlow解析图像
文| 谷歌开发技术专家 (GDE) 王玉成 (York Wang) 前面絮叨了这么多.好像还没有一个整体的概念.我们怎样写一个完整的代码呢? 如今深度学习非常火,那我们就在Android Things ...
macox下编译snappy静态库
源代码地址:https://github.com/google/snappy 下载 git clone https://github.com/google/snappy 编译进入snappy源代码文 ...
【Cocos游戏实战】功夫小子第七课之游戏主功能场景逻辑功能和暂停功能场景的分析和实现
CSDN的markdown编辑器是吃屎了么! !.什么玩意.!写了一半写不了东西还全没了,搞个毛线! 本节课的视频教程地址是:第七课在此假设本教程有帮助到您,希望您能点击进去观看一下,并且如今注冊成 ...
家居环境监測系统设计（PC上位机版）（手机APP版待定）
下面是我的毕业设计:家居环境监測系统设计(PC上位机临时版.手机app版待定).本系统採用STC12C5A60S2单片机.结合传感器.分别对空气湿度.空气温度.气压.海拔.进水温度.出水温度.光照强度 ...

我知道你不知道的负Margin

我知道你不知道的负Margin的更多相关文章

随机推荐

热门专题