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& ...
随机推荐
- 解析JSON、扩展Fiddler
解析JSON.扩展Fiddler 按文章结构,这部分应该给出WCFRest项目示例,我想WinForm示例足够详尽了,况且WCFRest还不需要使用插件AppDomain那一套,于是把最近写的Fidd ...
- grub 的安装与使用
安装与使用grub 要开始探究 GRUB 的精妙之处,首先需要下载.编译和安装它.但不要害怕 -- 根本不会修改您的引导记录 -- 我们只是要编译和安装 GRUB,就像其它程序一样,在此过程中我们可以 ...
- 昨天CSAPP上的疑问的解答
昨天CSAPP上的疑问的解答 今天整明白了. CSAPP英文版第2版,826页,或者中文版第2版546页,有这么一段.关于多级页表的. "But if we had a 32-bit add ...
- outlook gmail setting
smtp.gmail.com pop.gmail.com SMTP服务器端口 465 要求安全连接打钩 POP3服务器端口 995 要求安全连接打钩
- Execl导入问题之文本转换
前些天在基础数据的导入过程中,遇到了这样一个问题:数据明明存在,可是就是不识别!给出的错误提示是:该数据对应的外键不存在! 我找出其中的一条数据,在外键表中查询是存在的!问题出在哪里了呢? 从exec ...
- gcc与g++的编译链接的示例详解
一.编译方式的示例详解 1. 编译C代码 代码如下:main.c /*! ************************************************************** ...
- ubuntu下vsftpd配置
网上的文章好难懂啊..只想要简单粗暴,弄好能用就行啊,复杂的以后研究不行吗...折腾好久,其实弄出来能用不就这么点内容吗... 本文在Ubuntu Server 14.04 amd64系统测试. 安装 ...
- html5新标签布局应用指南
html5中为了便于设计者的网站布局新添加了一些标签,本文主要讲解这些标签的实际应用方法. 大多数前端的朋友在设计网站时主要应用<div>标签构造盒子进行布局,这是种非常高效的方法,可以将 ...
- Kotlin的扩展函数：扩展Android框架（KAD 08）
作者:Antonio Leiva 时间:Jan 11, 2017 原文链接:https://antonioleiva.com/extension-functions-kotlin/ 扩展函数是Kotl ...
- 2015 ACM / ICPC 亚洲区域赛总结（长春站&北京站）
队名:Unlimited Code Works(无尽编码) 队员:Wu.Wang.Zhou 先说一下队伍:Wu是大三学长:Wang高中noip省一:我最渣,去年来大学开始学的a+b,参加今年区域赛之 ...