突然想起这个问题，这是很基础很基础的问题啊，但之前很多次都忘记了，然后困扰了我很久。不清不楚的感觉很不好，所以要做成笔记比较好记住，好记性不如烂笔头，以后再次困惑了再回来看看。推荐文章，海玉的《我知道你不知道的负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. 使用Prism提供的类实现WPF MVVM点餐Demo

    使用Prism提供的类实现WPF MVVM点餐Demo 由于公司开发的技术需求,近期在学习MVVM模式开发WPF应用程序.进过一段时间的学习,感受到:学习MVVM模式,最好的方法就是用MVVM做几个D ...

  2. Wijmo 5 + Ionic Framework之：Hello World！

    Wijmo 5 + Ionic Framework之:Hello World! 本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World. ...

  3. wpa_cli P2P 连接相关的调试命令

    在最近的一次客户端上的调试p2p的wifi display, 他们中的一半Android该调整了,整个前所以没有太多的研究p2p过程连接, 客户现在使用的非Android平台架构. 需要协助客户这么多 ...

  4. ADFS 2.0 配置简介 PartⅢ – 声明规则语言

    上一篇我们最终把 ADFS 与应用之间的信任关系建立起来了,但是应用接收到的声明信息只有默认的两个,这次我们就来学学怎么配置声明. 一.声明存储配置 ADFS 目前默认支持三种方式的声明值存储,另外还 ...

  5. jquery防止事件冒泡和取消默认行为案例

    ----------------js取消事件冒泡: window.event.cancelBubble=true; --------------jquery事件参数可以防止事件冒泡: $(" ...

  6. (转载)Log4Net 在多层项目中的使用小记

    (原创)Log4Net 在多层项目中的使用小记 这几天刚好在调整一个项目,把一些自己不是很清楚的东西先试验一下,这篇文章主要是对我在项目中需要使用Log4Net的一些记录.网上有很多相关的教程,但是各 ...

  7. 自定义HttpFilter模块完善

    自定义HttpFilter模块完善   背景 在12月由于要针对项目做用户操作日志,但不想在每个方法里去增加代码,写入用户日志.因为这样具体的方法违背职责单一的原则,若后期日志内容格式发生变更,或其他 ...

  8. html页面显示服务器时间

    全局变量 var lblTimer; var d; ready事件里面写 lblTimer = $("#lbltimer"); d = new Date('<%=DateTi ...

  9. Hive UDAF开发之同时计算最大值与最小值

    卷首语 前一篇文章hive UDAF开发入门和运行过程详解(转)里面讲过UDAF的开发过程,其中说到如果要深入理解UDAF的执行,可以看看求平均值的UDF的源码 本人在看完源码后,也还是没能十分理解里 ...

  10. PHP 5.5以后加速插件：Zend Opcache

    大家知道目前PHP的缓存插件一般有三个: APC. eAccelerator. XCache,但未来它们可能都会消失,因为PHP 5.5已经集成 Zend Opcache,功能和前三者相似但又有少许不 ...