看过一篇文章是关于我知道你不知道的负Margin，里面对margin做了总结：

当margin四个值都为正数值的话，那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。

接下来就讲在实际开发中用到的几个比较常用的负margin实例：

1、bootstrap框架的栅格系统是一个亮点，它就用了负margin来完美的解决了container 和 row 之间的外边距问题，具体实现如下

其中，container设置了水平方向上的padding，使其内部内容不会接触到浏览器的边界，大小为15px，就是图片中粉红色的部分；特别注意里面嵌套的row有一个特殊的地方，就是左右各有-15px的margin，就是图片中的蓝色部分，这样就抵消了container的水平方向的15px的padding，千万记住要把row放到container的内部，这样才能保证正常。

2、多列等高布局——使用正padding和负margin对冲实现多列布局方法

这个方法就是，在所有列中使用正的上下padding，和负的上下margin，并在所有列外面加上一个容器，并设置overflow:hidden把溢出背景切掉。

 <html>

 <head>

 <meta charset="utf-8">

 <style type="text/css">

 * {

   margin:0;

   padding:0;

   border:0;

 }

 #container {

 margin: 0 auto;

  overflow: hidden;

  width: 960px;

  }

  .column {

  background: #ccc;

  float: left;

  width: 200px;

 margin-right: 5px;

 margin-bottom: -99999px;

  padding-bottom: 99999px;

  }

  #content {

  background: #eee;

  }

  #right {

  float: right;

 margin-right: 0;

  }

 </style>

 </head>

 <body>

 <div id="container" >

   <div id="left" class="column aside" >

   <p>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br></p>

   </div>

   <div id="content" class="column section" >

   <p>Main content </p>

   </div>

   <div id="right" class="column aside" >

   <p>Sidebar</p>

   </div>

 </div>

 </body>

 </html>

用margin还是用padding？（3）—— 负margin实战的更多相关文章

  1. [转]关于负margin在页面中布局的应用

    本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...

  2. 我知道你不知道的负Margin

    现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在.个人认为负margin技术是学习css路上必不可缺少的课题之一,许多高级应用及疑难杂症修复都可以使用负marg ...

  3. 负值之美：负margin在页面布局中的应用

    本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...

  4. 负margin的原理以及应用

    负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧. 虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述 ...

  5. 负margin在布局中的运用（*****************************************************************）

    一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  6. 负margin一些奇葩的布局技巧

    copy_from_ http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ <!doctype html> &l ...

  7. css布局之负margin妙用及其他实现

    相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的 ...

  8. 京东区块排版负margin用法

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于元素加上margin属性后以谁为基准移动的问题及负margin的问题

    突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...

随机推荐

  1. PyTorch框架+Python 3面向对象编程学习笔记

    一.CNN情感分类中的面向对象部分 sparse.py super(Embedding, self).__init__() 表示需要父类初始化,即要运行父类的_init_(),如果没有这个,则要自定义 ...

  2. Linux 在VMware中搭建CentOS6.5虚拟机

    原文:http://www.cnblogs.com/PurpleDream/p/4263465.html Linux 在VMware中搭建CentOS6.5虚拟机 前言:      本文主要是我在大家 ...

  3. 如何手写一款SQL injection tool？

    0×01 前言 我想在FreeBuf上出没的人一般都是安全行业的,或者说是安全方面的爱好者,所以大家对sql注入应该都比较了解,反正我刚入门的时候就是学的这些:sql注入.xss之类的.sql注入从出 ...

  4. [反汇编练习] 160个CrackMe之030

    [反汇编练习] 160个CrackMe之030. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  5. Controller 层实现

    一.实验介绍 1.1 实验内容 本节课程主要利用 Spring MVC 框架实现 Controller 层以及一些辅助类的实现. 1.2 实验知识点 Spring MVC 框架 1.3 实验环境 JD ...

  6. python 常见细节知识点

    1. a[::-1]翻转 设有一个元组或者列表 a = (1,2,3,4) b = [1,2,3,4] 则a[::-1]和b[::-1]的含义是将元组或列表的内容翻转 a[::-1] # 结果为(4, ...

  7. Maven引入本地Jar包并打包进War包中

    1.概述 在平时的开发中,有一些Jar包因为种种原因,在Maven的中央仓库中没有收录,所以就要使用本地引入的方式加入进来. 2. 拷贝至项目根目录 项目根目录即pom.xml文件所在的同级目录,可以 ...

  8. java.lang.String中的trim()方法的详细说明（转）

    String.Trim()方法到底为我们做了什么,仅仅是去除字符串两端的空格吗? 一直以为Trim()方法就是把字符串两端的空格字符给删去,其实我错了,而且错的比较离谱. 首先我直接反编译String ...

  9. Content Provider 详解

    几个概念:Cursor. Content provider . Uri  .contentresolver 1. Cursor : 个人理解为数据库中的一行数据,它是每行数据的集合.它是一个类.通过它 ...

  10. Selenium系列之--08 操作已打开的浏览器

    Can Selenium interact with an existing browser session? 参考上面的文章 1. 建一个ReuseWebDriver类 import java.io ...