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

    考试排名 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...

  2. C语言JSON-RPC

         近期对json-rpc比較感兴趣,思想非常easy,并且看到了非常多不同语言的实现.在github上 hmngomes 的 json-rpc-c (实现的是server端,基于TCP流),短 ...

  3. 用javascript实现2048的小游戏

    前段时间,看了一个视频,用javascript实现的2048小游戏,发现不难,都是一些基出的语法和简单逻辑. 整个2048游戏没有很多的数据,所有,实现起来还是很有成就感的. 先上图,简直就和原版游戏 ...

  4. Javascript实例技巧精选(6)—滚动鼠标中键读取Json数据分页显示网页内容

    >>点击这里下载完整html源码<< 截图如下: 滚动鼠标中键读取Json数据分页显示网页内容,关键的Javascript如下: <script type="t ...

  5. 朴素贝页斯分类法 c++实现

    朴素贝叶斯法是基于贝叶斯定理与特征条件独立假设的分类方法.对于搞机器学习的同学们来说,这是相对简单但效果较好的模型. 朴素贝叶斯方法的理论 设输入为n维特征向量X={x1,x2,...,xn},输出为 ...

  6. Binder机制，从Java到C （8. ServiceManager in Native）

    在第三篇 Binder机制,从Java到C (3. ServiceManager in Java) 中,讲到ServiceManager的Stub端在Native,Proxy端在Java.实际上,还要 ...

  7. c#多选下拉框（ComboBox）

    代码如下 using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawi ...

  8. Django ORM 查询管理器

    Django ORM 查询管理器 ORM 查询管理器 对于 ORM 定义: 对象关系映射, Object Relational Mapping, ORM, 是一种程序设计技术,用于实现面向对象编程语言 ...

  9. MvcMovieStore实例 教程

    转原创:MvcMovieStore 实例教程(新概念版:mvc5.0,EF6.01)-初露锋芒 如需转载,请注明出处:http://www.cnblogs.com/DoduNet/ 最近趁业余时间,把 ...

  10. IIS日志分析的作用

    站长都知道有ISS日志,可是有很少人去关注它,也许你觉得在一些站长工具里面我们就能找到我们想要的工具,哪你就错了,我们的网站被收入靠的是蜘蛛,想要真正了解蜘蛛,就一定要好好重视iss日志分析,为什么这 ...