一.负边距原理

正边距以相邻模块的位置为参考点进行移动，并对周围模块进行合理地排挤。

负边距即margin的四个边界值为负值。

在html中使用负边距margin-left和margin-top相当于是元素左移、上移，同时文档流的位置会发生变化。

使用负边距margin-right和margin-bottom，元素本身没有变化，其后面的元素会相应的左移，上移。

 归纳为文档流通过负边距自身只能上移或右移。

二.说明

1margin-left,margin-top

 <style type="text/css">

 .wrap div{float:left;height:200px;}

 .wrap {overflow:hidden;_zoom:1;}

 .content{width:10%;background:gray;}

 .nav{width:5%;background:orange;;}

 .infor{width:5%;background:green;}

 </style>

 <body>

 <div class="wrap">

 <div class="content">a</div>

 <div class="nav">b</div>

 <div class="infor">c</div>

 </div>

 </body>

给nav加入margin-left:-3%;nav向前移动3%。

2.margin-right,margin-bottom

<style type="text/css">

.wrap div{float:left;height:20px;}

.wrap {overflow:hidden;_zoom:1;}

.content{width:10%;background:gray; }

.nav{clear:both;width:5%;background:orange;}

.infor{clear:both;width:5%;background:green;}

</style>

<body>

<div class="wrap">

<div class="content">a</div>

<div class="nav">b</div>

<div class="infor">c</div>

</div>

</body>

给content加入margin-bottom:-1%;nav向上移动1%。

CSS-负边距原理的更多相关文章

  1. css负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

  2. CSS 负边距读后感

    最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...

  3. css负边距之详解

    自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...

  4. css 负边距 小记

    水平格式化 当我们在元素上设置width的时候,影响的是内容区的宽度  但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值  (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 ma ...

  5. 浅析CSS负边距

    本文主要讨论两点,1.左右负边距对元素宽度的影响:2.负边距对浮动元素的影响. 在讨论这两点前,首先要理解盒模型.文档流. 盒模型,见下图,简单明了. 文档流,将窗体自上而下分成一行行, 并在每行中按 ...

  6. CSS负边距margin的应用

    原文 简书原文:https://www.jianshu.com/p/75a178e65207 相关文章 CSS负margin的影响:https://www.cnblogs.com/shcrk/p/93 ...

  7. css负边距之详解(子绝父相)

    来源 | http://segmentfault.com 原文 |  The Definitive Guide to Using Negative Margins   自从1998年CSS2作为推荐以 ...

  8. css 负边距

    负边距 可以改变 他在文档流中的尺寸 当块级元素设置 margin: -10px;  这个快 的大小没变但是他的定位的位置向上串了,压住了上面的文字   而且在他后面的文字  会爬到他身上 而前面的文 ...

  9. CSS 负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8"& ...

  10. CSS负边距自适应布局三例

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...

随机推荐

  1. Ogre源码编译教程

    最近突然发现Ogre引擎更新到2.1版本了,既然依旧是代码开源,本着学习的精神就下载下来弄弄.但是官网提供的SDK版本只有1.9的,考虑到学习的便利性,因此最好从Source版本开始弄,这样的话以后想 ...

  2. MVVM与Knockout

    MVVM与Knockout 前言 今天搞的有点快,因为上午简单研究了下MVC,发现MVC不太适合前端开发,然后之前看几位前端前辈都推荐前端使用MVVM,但是我对其还不甚了解,所以我觉得下午还是应该先看 ...

  3. CENTOS下Python 升级后YUM无法使用的解决办法

    Python有很多实用的工具,安装依赖python版本较高,升级Python后导致yum无法使用. 原因: 系统自带的yum依赖Python老版本,升级后不兼容 解决办法: 1. 列出所有版本,确定老 ...

  4. grub 的安装与使用

    安装与使用grub 要开始探究 GRUB 的精妙之处,首先需要下载.编译和安装它.但不要害怕 -- 根本不会修改您的引导记录 -- 我们只是要编译和安装 GRUB,就像其它程序一样,在此过程中我们可以 ...

  5. poj 3897 Maze Stretching 二分+A*搜索

    题意,给你一个l,和一个地图,让你从起点走到终点,使得路程刚好等于l. 你可以选择一个系数,把纵向的地图拉伸或收缩,比如你选择系数0.5,也就是说现在上下走一步消耗0.5的距离,如果选择系数3,也就是 ...

  6. java.lang.IllegalArgumentException: Wrong FS ...异常的解决

    配置完Hbase后,启动,JPS发现少了HMaster这个进程.查看了一下日志如下: java.lang.IllegalArgumentException: Wrong FS: hdfs://192. ...

  7. Android——另外一种增删查改的方式(ContentProvider常用)

    以下介绍另外一种增删查改的方式 package com.njupt.sqllist; import java.util.ArrayList; import java.util.List; import ...

  8. Js 获取当前月的天数

    function getDays() { //构造当前日期对象 var date = new Date(); //获取年份 var year = date.getFullYear(); //获取当前月 ...

  9. 【转载】深入Java单例模式

    原文出处:http://devbean.blog.51cto.com/448512/203501 在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就 ...

  10. C语言之分支结构 if(二)

    If的第三种和第四种形式(tips:也是比较常用的形式) 3).if语句第三种形式: 简单来说就是任意的if或者else里面还可以嵌套任意的if-else语句 语法: if(表达式){ if(表达式2 ...