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

    原文:C#将XML转换成JSON转换XML using System; using System.Collections.Generic; using System.Linq; using Syste ...

  2. NYOJ 58 步数最少 【BFS】

    意甲冠军:不解释. 策略:如果: 这个问题也可以用深宽搜索搜索中使用.我曾经写过,使用深层搜索.最近的学校范围内的搜索,拿这个问题来试试你的手. 代码: #include<stdio.h> ...

  3. 同TTX更可爱的层次分析法游戏破解

    最近的工作太忙,没啥时间写文章,今天遇到一点点的游戏,浅析.以中午的优势写这篇文章. 移动MM的游戏.前面我们已经写过非常多文章,没有看过的朋友,自行查找就可以,今天我们继续分析一个类似的游戏,只是使 ...

  4. SufaceView（绘图类）

    public class MainActivity extends Activity { GrameView grameView; @Override public void onCreate(Bun ...

  5. Asp.Net MVC5入门学习

    添加一个Controller(控制器) 因为我们用的是Asp.Net MVC,MVC最终还是一套框架,所以我们还是需要遵循它才能玩下去,或者说是更好的利用来便于我们的开发,要是对MVC概念还有点模糊的 ...

  6. 使用EasyUI的树控件构建Web界面

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  7. DLL文件的引用

    首先我们先要写一个DLL文件: 我先创建一个win32的DLL工程,在工程中添加了Math.h和Math.cpp文件,具体内容如下: Math.h: #pragma once #include &qu ...

  8. mac 下nginx加入开机启动

    通过brew install nginx后设置开机启动项 sudo cp /usr/local/opt/nginx/*.plist /Library/LaunchDaemonssudo launchc ...

  9. [转]UIWebView的Javascript运行时对象

    An alternative, that may get you rejected from the app store, is to use WebScriptObject. These APIs ...

  10. DevExpress 学习使用之 SplitContainerControl

    无论是 .net framework 自带还是第三方组件,使用 Split 类控件时通常其 Panel 中都会包含多个子控件,在运行时不可避免遇到因改变 splitter 位置或改变窗体大小引起的界面 ...