效果

上和左方的margin负值使元素向上和左方向移动，如果该元素position不是absolute或fixed，这还会导致之后的元素也向上，左移

下和右方的margin负值会缩小下和右方的空间，使处于该元素下，右方的元素被拉向该元素，使之后的元素发生向上，左移，以至于与之重叠

原理

由于margin在上下左右的解析逻辑不同，引入参考线概念

margin 上方负值以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线

margin 左方负值以包含块(Containing block) 内容区域的左边或者左方相连元素 margin 的右边为参考线

margin 下方负值以元素本身 border 的下边为参考线

margin 右方负值以元素本身 border 的右边为参考线

https://segmentfault.com/img/bVkg4m

实例

双飞翼布局：左右列固定，中间列自适应布局

理解margin负值的更多相关文章

  1. 左侧固定，右侧自适应的布局方式理解margin负值理论

    一.浮动布局 1.先让固定宽度的div浮动!使其脱离文档流.2.margin-left的值等于固定div的宽度相等. .aside{ float: left; width: 200px; backgr ...

  2. 深入理解CSS中的margin负值

    前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...

  3. 微吧里的各种margin负值

    直在做各种项目接各种需求,但你的代码能力得到提高了吗?不停的项目经历虽然能够增加你的代码行数,但不一定能提升你的代码质量,所以除了构建阶段的代码细扣,项目之后的代码总结是至关重要的. 微吧中除了模块化 ...

  4. CSS margin负值学习及实际应用

    前言 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它. 表现 虽然m ...

  5. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  6. 理解margin

    margin可以改变容器的尺寸 //元素尺寸分为可视尺寸,占据尺寸 margin与可视尺寸 1.适用于没有设定width/height的普通block水平元素 2.只适用于水平方向的尺寸 应用:一侧定 ...

  7. 几个常见的布局的多种实现方式及margin负值总结

    第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div ...

  8. margin负值的几种妙用

    1:定位+margin负值实现元素水平垂直居中 div{ position: absolute; z-index: 1; left: 50%; margin-left: -50px; width: 1 ...

  9. margin负值 – 一个秘密武器

    CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道 margin负值的秘密武器吗?我们一起看看吧! 1.带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 ...

随机推荐

  1. 最通用的ibatis.Net使用sql server存储过程返回分页数据的详细例子

    ibatis.Net是一个比较简单和灵活的ORM框架,今天我分享一个我的项目中使用sql server通用存储过程来分页的一个例子,用ibatis.Net框架统一返回分页数据为IList<Has ...

  2. GOLang（第二篇 发起一个Http请求）

    import ( "net/http" "net/url" ) //发送一个简单的get请求 func GetRequest { //联系使用 make(map ...

  3. 因子分析&主成分分析

    因子分析和主成分分析的异同点: 1.主成分分析仅仅是一种数据变换而不假设数据矩阵有什么样的结构形式 因子分析假定数据有特定的模型,而且齐总的因子满足特定的条件 2.因子分析和主成分分析都是从相关矩阵出 ...

  4. rsync 实验

    参考1:http://www.jb51.net/LINUXjishu/142722.html 参考2:http://sookk8.blog.51cto.com/455855/328076 主服务器IP ...

  5. C++风格写判断某年某月某日是一年的第几天

    初学C++,在结构体中写函数及一些C++语言需要的一些格式 看代码 #include<iostream>#include<cstdio>using namespace std; ...

  6. java环境设置与运行

    在初学java编程语言时,痛苦的事莫过于跟着示例一步步做,总是得不到想要的结果,这是很多初学者都会碰到的问题.下面详细教你运行第一个java应用程序(环境windows xp + jdk 6.0): ...

  7. word中利用宏替换标点标点全角与半角

    Alt+F11,然后插入-模块: 复制下面代码到编辑窗口: Sub 半角标点符号转换为全角标点符号() '中英互译文档中将中文段落中的英文标点符号替换为中文标点符号 Dim i As Paragrap ...

  8. HDU-1995-汉诺塔V

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1995 这题不知道该说水还是不水,对于这题我看到题目数据,就有了想法,因为题目数据给的好 所以我直接 假 ...

  9. spring mvc上传下载文件

    前端jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  10. VAST3.0规范

    VAST3.0视频广告投放规范 Posted on 2014年2月15日 1.术语 随着视频广告行业的发展,某些术语已经得到了广泛的采用.以下定义该文档中与视频广告投放相关的一些术语: 广告荚(Ad ...