突然想起这个问题，这是很基础很基础的问题啊，但之前很多次都忘记了，然后困扰了我很久。不清不楚的感觉很不好，所以要做成笔记比较好记住，好记性不如烂笔头，以后再次困惑了再回来看看。推荐文章，海玉的《我知道你不知道的负Margin》。

其中提到了margin的“参考线”这一概念及解释了负margin元素参考谁移动：

参考线就是 margin移动的基准点，此基准点相对于box(自身)是静止的。而margin的数值，就是box相对于参考线的位移量。

在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。margin的位移方向是指margin数值为正值时候的情形，如果是负值则位移方向相反。

外元素就是元素的紧邻元素。

以元素本身为参考，确切含义是指以自身为参考来影响周围元素的位置（实质即为影响下边和右边相邻元素的参考线）。

当margin四个值都为正数值的话，那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。

就是说，元素的margin-bottom为负值，该元素相邻的下方的元素会向上移动来靠近该元素。如果元素的margin-right为负值，与该元素相邻的又方的元素会向左移动靠近该元素。 尝试：

<!doctype html>

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

<title></title>

<style type="text/css">

    body{margin:100px;padding:0;}

    .up{border:3px solid blue;width:200px;height: 200px;margin-bottom:-20px;text-align: center;}

    .down{border:3px solid green;width:200px;height: 200px;text-align:center;}

</style>

</head>

<body>

    <div class="up">我是上面的框框,我设置了负的margin-bottom</div>

    <div class="down">我是下面的框框</div>

</body>

</html>

关于元素加上margin属性后以谁为基准移动的问题及负margin的问题的更多相关文章

  1. 元素设置disabled属性后便无法向后台传值

    元素设置disabled属性后便无法向后台传值

  2. 元素设置float属性后，其后面的元素的位置问题

    分两种情况: .content{ width:350px; height:150px; color:#fff; } .content1,.content2{ background-color: #00 ...

  3. 由浅入深漫谈margin属性1

    margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. (该文章解释是否正确有待商榷,目前我的实验结果为:在默认情况或者div左浮动的情 ...

  4. 由浅入深漫谈margin属性

    margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. 一.margin的基本特性 margin 属性包括 margin-top, ma ...

  5. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  6. 负margin在布局中的运用（*****************************************************************）

    一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  7. 我知道你不知道的负Margin

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

  8. 负margin的移位参考线

    同早年~ 问题描述 在xx项目中,羊城通卡号的输入框处使用了xx库中的实现方式,即将提示文字标签<label>通过负margin移位到<input>框的下面.静态时展现良好,j ...

  9. 负margin使用权威指南

    自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...

随机推荐

  1. 【工作笔记四】去掉a标签超链接的虚线框的方法

    a{ blr:expression(this.onFocus=this.blur()); /* IE Opera */ outline:none; /* FF Opera */ } a:focus{ ...

  2. Win7下Redmine2.0.3+Mysql55+Ruby1.8.7成功安装记录分享

    准备软件: Ruby 下载网页: http://rubyforge.org/frs/?group_id=167&release_id=46836 http://files.rubyforge. ...

  3. Spring.Net+Nhibernate+Asp.Net Mvc 框架

    搭建你的Spring.Net+Nhibernate+Asp.Net Mvc 框架 (一)搭建你的环境 使用这套框架不是很长时间.但也基本应用了几个项目中了.在此和大家分享一下我是怎样一步一步搭建此框架 ...

  4. Git的使用学习资源

    开学第一天一般都挺认真的,认真做个功课. 跟据Ryan Tang的推荐,有两个比较好的学习Git的网站:http://git.gitcafe.com/book/zh 还有一个是CodeSchool的一 ...

  5. ext日期加减任意天数

    1.Ext.util.Format.date(new Date().add(Date.DAY, 5), 'Y-m-d'), 'Y-m-d') 2.Ext.util.Format.date(new Da ...

  6. Introducing ASP.NET vNext and MVC 6

    [译]Introducing ASP.NET vNext and MVC 6 原文:http://www.infoq.com/news/2014/05/ASP.NET-vNext?utm_source ...

  7. Visual Studio 2013中的“Browser Link”

    前几天,参加了,VS13的新特性的讲座,回来便试了一下, 默认Html会引用如下脚本: <!-- Visual Studio Browser Link --> <script typ ...

  8. [原]Escape From the iOS Sanbox on Jailbreak Device

    just my thinking, 3 ways to escape from sandbox on jailbreak device, to do file copying or execute s ...

  9. Http Module 介绍(转载）

    Http Module 介绍 引言 Http 请求处理流程 和 Http Handler 介绍 这两篇文章里,我们首先了解了Http请求在服务器端的处理流程,随后我们知道Http请求最终会由实现了IH ...

  10. jQuery的delegate

    jQuery的delegate 在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方, ...