效果

上和左方的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. Memcached操作以及用法

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...

  2. Core Data 应用程序实践指南（Core Data 应用程序实践指南）

    译者序 前言 勘误 1. 初次尝试Core Data应用程序 本书的基础,基本概念,能做什么,不能做什么.实现CoreDataHelper类,演示如何将Core Data同既有的应用程序相集成. 2. ...

  3. PHP文件夹文件拷贝/复制函数 dir_copy($src = '', $dst = '')

    /* * 文件夹文件拷贝 * * @param string $src 来源文件夹 * @param string $dst 目的地文件夹 * @return bool */ function dir ...

  4. 获取打开文件的PID

    var SI : TStartupInfo; PI : TProcessInformation; pid:DWORD; begin ZeroMemory(@SI, SizeOf(SI)); //Zer ...

  5. 关于自己封装Web前端框架的思考和探索

    一.引言 首先这些年关于前端技术层出不穷,从最早的只用js做简单验证,到现在发现好像大前端已经无所不能了的感觉.特别是为了降低前端开发复杂度,涌现了一大批 的MVC/MVVM模式的前端框架,不停了刷新 ...

  6. Spark SQL原理及实战

    一.Spark SQL的发展 1.spark SQL和shark SparkSQL的前身是Shark,给熟悉RDBMS但又不理解MapReduce的技术人员提供快速上手的工具,Hive应运而生,它是当 ...

  7. JavaWeb学习篇之----HTTP协议详解

    简介: HTTP是hypertexttransfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程. HTTP协 ...

  8. 有效的GOCsharpHelper1.0（源代码开放）

    csharp编写界面,调用基于opencv的图像处理类库,是解决一类问题的优良方法.经过不懈研究,有最新进展: 一.目前情况和优点        位置在11.通过clr             架在c ...

  9. 001.net开发环境与变量

    1 .net 技术平台,用来创建互联互通的应用程序 2 应用 嵌入式开发企业级应用 3 .NET Framework 技术:公共语言运行时 .NET Framework的工作模式:.NetC#> ...

  10. 玩转微信小程序

    原文链接 2007 年 1 月 9 号,苹果一代在功能机盛行的年代中出世. 2017 年 1 月 9 号,微信小程序在重型app风靡的压力下上线. 苹果的出世掀起了互联网一波又一波的浪潮,而微信小程序 ...