效果

上和左方的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. js事件监听器用法实例详解-注册与注销监听封装

    本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...

  2. 如何在windows下载和安装Apache

    进入apache服务器官网http://httpd.apache.org/,这里我们以下载稳定版的httpd 2.4.25为例,点击"Files for Microsoft Windows& ...

  3. C#的显式接口和隐式接口（转载）

    接口的实现分为:隐式实现和显式实现.如果类或者结构要实现的是单个接口,可以使用隐式实现,如果类或者结构继承了多个接口那么接口中相同名称成员就要显式实现.显示实现是通过使用接口的完全限定名来实现接口成员 ...

  4. iOS 登陆之界面设置

    1.界面构成 1.1. 效果图 1.2. 元素 背景图 用户名的输入框 密码的输入框 登陆按钮 忘记密码 用户注册 第三方登陆 两个分割线

  5. 基于回调的事件处理——重写onTouchEvent方法响应触摸屏事件

    对于Android提供的事件处理模型,不难发现基于监听的事件处理模型具有更大的优势: 基于监听的事件模型分工更加明确,事件源.事件监听有两个类分开实现,因此具有更好的维护性. Android的事件处理 ...

  6. Stanford机器学习课程之一——引言

    Andrew Ng的Machine Learning课程,在网易公开课上有中文版视频http://v.163.com/special/opencourse/machinelearning.html,六 ...

  7. js观察者模式与Model

    目的 观察者模式是常见的设计模式,可以被应用到MV*框架的Model上,来实现对数据变化的监听. 基本概念 观察者模式是一种常见的设计模式.被观察者可以被订阅(subscribe),并在状态发生改变时 ...

  8. SLS评测报告

    什么是SLS?  简单日志服务(Simple Log Service,简称SLS)是针对日志收集.存储.查询和分析的服务.用户只需简单地配置日志产生的位置和格式等信息,就能实时查询海量日志,并可通过S ...

  9. 我的Linux软件集

    把我常用的软件记下来,以后重装安装的时候方便一些- 这个博文会不断更新的- 开发工具类 Monodevelop 编写C#控制台程序和GTK#窗口程序,很好,虽然没有VS强大,但是够用了 CodeBlo ...

  10. 《JAVASCRIPT高级程序设计》事件处理程序和事件类型

    一.事件流 谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡, ...