突然想起这个问题，这是很基础很基础的问题啊，但之前很多次都忘记了，然后困扰了我很久。不清不楚的感觉很不好，所以要做成笔记比较好记住，好记性不如烂笔头，以后再次困惑了再回来看看。推荐文章，海玉的《我知道你不知道的负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. java这些东西发展（4）-------无穷time of error

    今天,有些郁闷的心情啊.空指针下午折磨.到现在为止仍然没有得到解决,专家的招募结果没拿到,我们必须继续自己的,进而改变一点点一点点地找到它,但现在我不想搞,准备回家,这浪费了一个多小时,之前记录的下一 ...

  2. WEB项目(B/S系统)打包安装（总结篇）

    原文:WEB项目(B/S系统)打包安装(总结篇) 打包安装程序的制作选择性还很多的,有installshield,wise installer,inno setup这几个做打包安装项目都是很强大的,要 ...

  3. 【转】Android折叠效果实现案例

    源文:http://mobile.51cto.com/abased-401983.htm 为了使界面的效果更加绚丽,体验效果更佳,往往需要开发者们自行开发新的界面效果,在这里,我将奉上各种实现折叠效果 ...

  4. Redmine（Ruby）配置经验

    Redmine(Ruby)配置经验记录在配置Redmine邮件同步过程中遇到的各种问题与解决方法 1. 如何安装Redminehttp://www.redmine.org/projects/redmi ...

  5. 体验SubSonic

    体验SubSonic SubSonic简介 SubSonic配置 利用sonic.exe来生成代码 通过Substage来生成代码 简单操作示例 1.SubSonic简介 一句讲完就是:SubSoni ...

  6. [QT Creator]LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 。

    这个问题很恶心!网上说的原因是因为安装了多了版本的VS.在高版本的2010和2012上都会有问题,解决方法是使用visual studio 2008安装目录下的一个文件替代vs2010安装目录下的文件 ...

  7. Spyder提示ValueError: API 'QString' has already been set to version 1

    转载自:http://wuyuans.com/2013/02/spyder-valueerror-api-qstring-has-already-been-set-to-version-1/ 在IPy ...

  8. 求解轨道力学二体意义下的Lambert方程（兰伯特方程）的Fortran程序

    轨道力学中二体问题下求解兰伯特方程. 老外写的Matlab程序,我把它转成了Fortran程序. !************************************************** ...

  9. MVC中如何实现本地化的解决方案

    1. Q: 什么是本地化? A: 本地化是指企业在国际化过程中,为了提高市场竞争力,同时降低成本,将产品的生产.销售等环节按特定国家/地区或语言市场的需要进行组织,使之符合特定区域市场的组织变革过程. ...

  10. 定制你自己的jQuery

    如何定制你自己的jQuery jQuery随着版本的不断升级代码量也随之增加,从1.0.0的不到两千行到现在的1.10.2已经突破1万行. 新的API不断增加,但有些在项目中并没有用到.jQuery团 ...