看过一篇文章是关于我知道你不知道的负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. HDU5618 Jam's problem again

    CDQ分治模板题 #include<cstdio> #include<cctype> #include<algorithm> #include<cstring ...

  2. Linux 嵌入式启动以及优化

    转载:http://www.embeddedlinux.org.cn/html/jishuzixun/201312/19-2717.html 第一步: BootLoader -- U boot   1 ...

  3. 一个jdbc connection连接对应一个事务

    Spring保证在methodB方法中所有的调用都获得到一个相同的连接.在调用methodB时,没有一个存在的事务,所以获得一个新的连接,开启了一个新的事务. Spring保证在methodB方法中所 ...

  4. DevExpress打印功能介绍 z

    一.打印功能说明: 打印功能,我们有多种实现方式,可以根据需要自行选择,我简单的总结下两种方法. (1).使用微软.net框架自带的PrintDocument,这种方式是直接借助Graphics,自行 ...

  5. 记Weblogic采用RAC方式链接数据库遇到的问题

      前几天,去客户现场部署系统,WEBLOGIC连接数据库使用RAC方式连接,好几个人弄了一下午愣是没搞定,总是报SID错误 开始一致认为是防火墙的原因,后来SSH登陆应用服务器后,再TELNET数据 ...

  6. meta标签多种用法

    <meta name=”google” content=”notranslate” /> <!-- 有时,Google在结果页面会提供一个翻译链接,但有时候你不希望出现这个链接,你可 ...

  7. innerHTML outerHTML innerText

      迁移时间--2017年10月31日14:52:59 Author:Marydon UpdateTime--2017年1月15日20:33:03innerHTML,outerHTML与innerTe ...

  8. Content Provider 详解

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

  9. cas 单点登录(SSO)之中的一个: jasig cas-server 安装

    cas 单点登录(SSO)实验之中的一个: jasig cas-server 安装 參考文章: http://my.oschina.net/indestiny/blog/200768#comments ...

  10. VueJS表达式支持:逻辑控制或运算

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...