浅析CSS负边距
本文主要讨论两点，1、左右负边距对元素宽度的影响；2、负边距对浮动元素的影响。
在讨论这两点前，首先要理解盒模型、文档流。
盒模型，见下图，简单明了。
文档流，将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
有三种情况将使得元素脱离文档流而存在,分别是浮动，绝对定位，固定定位.。但是在IE中浮动元素也存在于文档流中。
绝对定位,，即完全脱离文档流，相对于position属性非static值的最近父级元素进行偏移。
固定定位,，即完全脱离文档流，相对于视区进行偏移。
相对定位,，即相对于元素在文档流中位置进行偏移.，但保留原占位。
现在步入正题。
1、左右负边距对元素宽度的影响。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右负边距对元素宽度的影响</title>
<style>
*{
margin: 0;
padding: 0;
}
#wraper{
width: 400px;
height: 50px;
margin: auto;
}
#content{
background-color: #000;
height: 50px;
}
</style>
</head>
<body>
<div id="wraper">
<div id="content"></div>
</div>
</body>
</html>
代码效果如下图图一，给id为content的div添加属性margin-left: -100px后的效果图如下图图二；给id为content的div添加属性margin-right: -100px;后的效果图如下图图三。
图一：
图二：
图三：
从以上效果可以看出，左右负边距可以影响元素的宽度。
对此，很好理解，我们都知道，margin-left是正值时content的左边界将右移（左边界远离父元素的左边界，从而宽度减小），而此处margin-left为负值，反过来就是content的左边界将向左移动（从而把宽度拉大）。右外边距为负值的情况同理。
2、负边距对浮动元素的影响
从上例中我们可以知道，如果把border设为0，并假想border是元素的边界，当margin和padding也都为0时，元素的边界将与border重合。
负边距实际上是改变元素的边界位置，改变效果和正边距的相反。
举个栗子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>负边距对浮动元素的影响</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
float: left;
}
#one{
background-color: red;
}
#two{
background-color: blue;
}
#three{
background-color: yellow;
}
</style>
</head>
<body>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</body>
</html>
效果如下图图四。
图四：
给div添加属性margin-right: -100px效果图如下图图五。
图五：
原来margin-right为0，所以三个div紧挨在一起，如果margin-right为正，他们将隔开一定距离，为负，当然就重叠啦！由此可以推测，当浏览器窗口的宽度小于300px时，黄色的div将被挤到下一行。
参考资料：
1、关于盒模型（http://www.cnblogs.com/SkySoot/archive/2012/04/17/2453000.html）；
2、关于负边距 （http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html）；
浅析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负边距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& ...
随机推荐
- LNMP系列网站零基础开发记录（一）
[目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配 ...
- 安装Windows7出现：”安装程序无法创建新的系统分区 也无法定位系统分区“ 终极解决方案
参考:地址 解决方法: 1.先格式化一下你要装的那个盘,然后,拔出U盘,啥也别动,只拔出U盘就行,再装上U盘,然后刷新一下[选硬盘那里的高级选项中有格式化和刷新],再选择要安装的硬盘点下一步,OK了, ...
- 查看Android应用签名信息
本文档介绍在Android下如何查看自己的应用签名及三方APK或系统APK签名信息,包含其中的MD5.SHA1.SHA256值和签名算法等信息. 1.查看自己的应用签名 可以通过两种方式查看 (1) ...
- 14、到底改如何区分android的平板、电视、手机
在没有出现android电视之前,如果要区分平板和手机有很多种方法: 方法1:看是否有通话功能 public boolean isTabletDevice() { TelephonyManager t ...
- 阿里云无线&前端团队是如何基于webpack实现前端工程化的
背景 前端经历了初期的野蛮生长(切图,写简单的特效)——为了兼容浏览器兼容性而出现的各种类库(JQUERY,YUI等——mv*(饱暖思淫欲,代码多了,也就想到怎样组织代码结构,backbone,ang ...
- float和CGFloat混用的风险
一般意义上的混用是没有问题的, 比如 float x=5.0; (void)printNumber:(CGFloat)number; 当调用printNumber:x的时候是没有问题的 但是如果使用f ...
- hdu 5120 Intersection
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5120 A ring is a 2-D figure bounded by two circles sh ...
- 【BZOJ】【1874】取石子游戏
SG函数 嗯博弈论入门题,关于SG函数这个东西可以去看VFK神犇的博客,讲的非常清楚Orz. 传送门:vfleaking.blog.163.com/blog/static/17480763420123 ...
- Brush Mode --- Nyoj 236 分类： Brush Mode 2014-04-02 06:56 116人阅读 评论(0) 收藏
心急的C小加 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 C小加有一些木棒,它们的长度和质量都已经知道,需要一个机器处理这些木棒,机器开启的时候需要耗费一个单位的时间 ...
- The 15th Zhejiang University Programming Contest
a ZOJ 3860 求和大家不一样的那个数,签到,map水之 #include<cstdio> #include<map> using namespace std; map ...