CSS-负边距原理
一.负边距原理
正边距以相邻模块的位置为参考点进行移动，并对周围模块进行合理地排挤。
负边距即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-负边距原理的更多相关文章
- css负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...
- CSS 负边距读后感
最近看到一篇讲解CSS 负边距的文章: http://segmentfault.com/a/1190000003750411?utm_source=Weibo&utm_medium=share ...
- css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...
- css 负边距 小记
水平格式化 当我们在元素上设置width的时候,影响的是内容区的宽度 但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值 (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 ma ...
- 浅析CSS负边距
本文主要讨论两点,1.左右负边距对元素宽度的影响:2.负边距对浮动元素的影响. 在讨论这两点前,首先要理解盒模型.文档流. 盒模型,见下图,简单明了. 文档流,将窗体自上而下分成一行行, 并在每行中按 ...
- CSS负边距margin的应用
原文 简书原文:https://www.jianshu.com/p/75a178e65207 相关文章 CSS负margin的影响:https://www.cnblogs.com/shcrk/p/93 ...
- css负边距之详解(子绝父相)
来源 | http://segmentfault.com 原文 | The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以 ...
- css 负边距
负边距 可以改变 他在文档流中的尺寸 当块级元素设置 margin: -10px; 这个快 的大小没变但是他的定位的位置向上串了,压住了上面的文字 而且在他后面的文字 会爬到他身上 而前面的文 ...
- CSS 负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"& ...
- CSS负边距自适应布局三例
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...
随机推荐
- TCP可靠传输的实现
TCP可靠传输的实现 1.概述 为方便描述可靠传输原理,假定数据传输只在一个方向上进行,即A发送数据,B给出确认 2.以字节为单位的滑动窗口 TCP的滑动窗口是以字节为单位的.为了 ...
- tar命令，重定向，正则表达式，添加删除用户，tr命令，sort排序
rpm包仅用于 redhat suse redflag 若是源代码包的话,那就都适用linux下面的备份,差不多就是用tar打包 tar命令用途:制作归档文件,释放归档文件格式:tar [选项]... ...
- 一步一步深入spring(6)--使用基于XML配置的spring实现的AOP
上节我们提到了使用基于注解实现的AOP,这节我们将用基于xml配置的方式来实现的AOP. 1.首先建立一个类,作为切面类,这个类主要用来实现注解中各种通知要实现的方法. package com.yan ...
- 一种利用异常机制基于MVC过滤器的防止重复提交的机制分享
防止重复提交验证机制 某些时候因为系统反应稍慢,急性子用户可能不耐烦会进行重复的提交,这个操作不仅可能造成系统负担,也可能产生垃圾数据. 出现这两种状况都是我们不希望的. 为此,在公司项目系统设计了以 ...
- 免费的Visual Studio的插件
在做了深入(的)研究之后(通过在google网站搜索),,我编译了15个免费Visual Studio 2005插件表..其中一些插件将提高您(的)代码(的)质量,,另外一些能使您编译(的)更快,,但 ...
- Python中关于XML-RPC原理
SimpleXMLRPCServer模块为XML-RPC服务端的写入提供了一个基本的框架.利用SimpleXMLRPCServer服务器既可以一直空闲,也可以利用CGIXMLRPCRequestHan ...
- HDU--杭电--3415--Max Sum of Max-K-sub-sequence--队列--双向队列
Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- Ecshop出现问题 includes\lib_main.php on line 1329 includes\lib_base.php on line
php 5.3版本兼容问题不少,以上函数参数传递问题可以将lib_main.php on line 1329这句 $ext = end(explode('.', $tmp)); 改为 : $extsu ...
- 从零开始学C++之对象的使用（二）：四种对象生存期和作用域、static 用法总结
一.四种对象生存期和作用域 栈对象 隐含调用构造函数(程序中没有显式调用) 堆对象 隐含调用构造函数(程序中没有显式调用),要显式释放 全局对象.静态全局对象 全局对象的构造先于main函数 已初始化 ...
- [置顶] Android图片异步加载之Android-Universal-Image-Loader
将近一个月没有更新博客了,由于这段时间以来准备毕业论文等各种事务缠身,一直没有时间和精力沉下来继续学习和整理一些东西.最近刚刚恢复到正轨,正好这两天看了下Android上关于图片异步加载的开源项目,就 ...