负的边距好像能减小元素在文档流中的尺寸一样，但事实上，它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，因此位置也就发生变化了。

实例：

因为P为block元素且没有指定width，则p的width+padding+border+margin=父级div的width（这里都是说的水平方向）。这里假定padding,border为0。父级div的width为400px。p的width为inherit，如果不设置margin，则p的width为400px。正如text-block。当margin-left:-100px;，p.width + (-100px) = 400px。所以p的width就变成了500px。这里说的p都是假定为inherit width即没有指定确定的width值。相反如果指定了p的width，则margin-left,margin-right为负值则会引起的不是p元素的大小，而是会引起p元素位置的变化。这里和浮动元素上应用负的margin-left和margin-right得到的效果是相同的

1. 负边距在普通文档流中的作用和效果

那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化的。看下面这幅图

负边距对这些由文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间

还是通过例子来说明吧。现在我们把上图中的块状元素、行内元素以及inline-block元素都设一个负边距 margin:-10px; 看看会发生什么

我们看到，黑灰色的块状元素好像向左和向上都分别嵌入了浏览器窗口的边界里10px，然后块状元素下面的文字也爬到了它身上，行内元素向左移动盖住了它前面的一个字，它后面的文字也有一部分覆盖在了它身上，inline-block的位置变化也很明显

好了，这点相信大家早就心知肚明了，就是负的边距好像能减小元素在文档流中的尺寸一样，但事实上，它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，因此位置也就发生变化了。这只是打个很形象的比喻，帮助大家理解一下。还要注意的是，文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动

比如，一个没有设定高度的块状元素，其高度是自动的，具体来说就是由它里面的文档流最后的位置决定的。假设它里面有一个出于文档流中的子元素，高度为100px;那这时这个父元素的高度就等于子元素的高度100px了，如果子元素继续增高，那么父元素也会跟着增高。可是如果这时子元素设一个负的margin-bottom,比如-20px，因为负边距会影响到文档流，本来文档流的高度是从父元素的最顶端到子元素的最底端这段高度，现在子元素有一个margin-bottom:-20px;就相当于文档流要向上退后20px,这样整个文档流的高度就减少了20px了，那么父元素的高度也会跟着减少20px。在IE8+以及那些标准浏览器中，这还需要父元素拥有一个overflow:hidden的属性，因为父元素的高度变了，但子元素的高度并没有变，所以需要使子元素超出隐藏，但即使不设置overflow:hidden，父元素的高度也是变小了的，只不过这时子元素的高度会超出父元素。在IE6中则不需要，但需要触发它的hasLayout属性。所以以前所说的多列等高布局就是利用这个原理来实现的

2. 左和右的负边距对元素宽度的影响

负边距不仅能影响元素在文档流中的位置，还能增加元素的宽度！

这个作用能实现的前提是：该元素没有设定width属性（当然width:auto是可以的）

比如下图的黑灰色部分是一个块状元素，它没有设定宽度。它被包裹在一个宽度为400px,且水平居中的父元素中

现在给这个元素的设一个margin-right:-100px

我们看到它的宽度的确变长100px;然后再给它设一个margin-left:-100px

负的margin会改变元素的宽度，这的确很让人费解，如果说负边距会改变元素在文档流中的位置还是很好理解的话，那改变宽度这种现象还真的蛮让人不可思议的

那这货有什么用途呢？我就举一个例子吧

想要创建上图中黑框内的几个元素按顺序排下来，中间带些间隔的布局要怎么做？，当然最简单省事的方法就是利用浮动了。我们把黑框里面的子元素向左浮动，然后设一个合适的margin-right,是不是就办到了呢？但因为外边黑框的宽度是固定的，就是里面四个子元素的宽度加上三列间隔的宽度，所以靠近右边边界的子元素就不应该有正向的margin-right了，否则这一行就只能容纳三个子元素了。有人说那这还不简单，给靠近右边界的那些子元素加一个class，把它的margin-right设为0不就行了。这当然可以，但如果这些子元素是在模板中通过循环动态输出的，那在循环的时候还得判断哪些子元素是靠近右边边界的，如果是就加上一个class。这样做的话是不是就有点麻烦了？所以解决办法是加大子元素的父容器的宽度，让它能够容纳一行中有四个子元素加上四列间隔的宽度，然后最外面的的黑框的那个容器设一个overflow:hidden就行了。上面说了负的左右边距能加大元素的宽度，所以给子元素的父容器设一个合适的负的margin-right就可以了。当然你也可以直接在css中把子元素的父容器的宽度设宽一些，举这个例子只是为了说明负边距也是一种方法

3. 负边距对浮动元素的影响

负边距对浮动元素的影响与负边距对文档流中元素的影响其实是差不多的。文档流中元素的位置由文档流的走向决定，浮动的元素也可以看成有一个“浮动流”存在，不过浮动流既可以向左，也可以向右

比如下图是三个向左浮动的元素，宽高都是100px

现在把它们都设一个margin-right:-50px; 然后会变成这样子

我们看到后面的元素叠到了前面的元素上

我们把浏览器缩小了，然后因为宽度不够，元素3掉下来了。我们给元素3设一个margin-left:-80px;看看会怎么样

这时元素3完全覆盖住了元素2,当元素3设为：margin-left:-200px时

我们看到元素3继续向左移动并覆盖住了元素1

现在想必大家都明白了负边距对浮动元素位置的影响了吧。所以那些说得很好听的什么圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。就是某个元素虽然是写在了后面，但可以通过负边距让它在浏览器显示的时候是在前面的

4. 负边距对绝对定位元素的影响

绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。利用这点，就有了经典的利用绝对定位来居中的方法

注1：关于left的偏移问题：

1. 当position设置为absolute或时fixed， left属性指定元素的左边缘和其包含块的左边缘之间的距离

2. 当position设置为relative，left属性指定元素的左边缘从正常位置向右移动的距离

3. 当position设置static，left属性没有影响

注2：关于left的取值问题：

1. 如果是数值，那么就是指定偏移的固定距离

2. 如果是百分比，那么就是相对父容器的宽度来计算

CSS布局奇淫巧计之-强大的负边距相关推荐

3.CSS布局奇淫巧计之-强大的负边距【转】
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
CSS布局奇淫技巧之--各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
js奇淫巧计--常用总结
JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...
CSS 布局经典问题初步整理
本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等. CSS 基础知识 ...
负边距在布局中的使用 BY:色拉油啊油
负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧.值为正的场景很常见,大家都很熟悉其表现当margin-top.margin-left为负值的时候,会把元素上移.左移,同时文档 ...
CSS布局奇技淫巧：各种居中
CSS布局奇技淫巧:各种居中 2017-08-23 无双前端开发作者:无双链接:www.cnblogs.com/2050/p/3392803.html 居中是我们使用css来布局时常遇到的情况. ...
CSS布局技巧之——各种居中
居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...
css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
html和css中的奇淫巧技：
1.禁止 textarea 调整大小(缩放): resize: none; 2.禁止图片img被选中: user-select: none; 3.css设置奇.偶数行的不同样式: :nth-child ...

CSS布局奇淫巧计之-强大的负边距

负的边距好像能减小元素在文档流中的尺寸一样，但事实上，它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，因此位置也就发生变化了。

实例：

1. 负边距在普通文档流中的作用和效果

那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化的。看下面这幅图

还是通过例子来说明吧。现在我们把上图中的块状元素、行内元素以及inline-block元素都设一个负边距 margin:-10px; 看看会发生什么

2. 左和右的负边距对元素宽度的影响

负边距不仅能影响元素在文档流中的位置，还能增加元素的宽度！

这个作用能实现的前提是：该元素没有设定width属性（当然width:auto是可以的）

比如下图的黑灰色部分是一个块状元素，它没有设定宽度。它被包裹在一个宽度为400px,且水平居中的父元素中

现在给这个元素的设一个margin-right:-100px

我们看到它的宽度的确变长100px;然后再给它设一个margin-left:-100px

负的margin会改变元素的宽度，这的确很让人费解，如果说负边距会改变元素在文档流中的位置还是很好理解的话，那改变宽度这种现象还真的蛮让人不可思议的

那这货有什么用途呢？我就举一个例子吧

3. 负边距对浮动元素的影响

负边距对浮动元素的影响与负边距对文档流中元素的影响其实是差不多的。文档流中元素的位置由文档流的走向决定，浮动的元素也可以看成有一个“浮动流”存在，不过浮动流既可以向左，也可以向右

比如下图是三个向左浮动的元素，宽高都是100px

现在把它们都设一个margin-right:-50px; 然后会变成这样子

我们看到后面的元素叠到了前面的元素上

我们把浏览器缩小了，然后因为宽度不够，元素3掉下来了。我们给元素3设一个margin-left:-80px;看看会怎么样

这时元素3完全覆盖住了元素2,当元素3设为：margin-left:-200px时

我们看到元素3继续向左移动并覆盖住了元素1

4. 负边距对绝对定位元素的影响

注1：关于left的偏移问题：

1. 当position设置为absolute或时fixed， left属性指定元素的左边缘和其包含块的左边缘之间的距离

2. 当position设置为relative，left属性指定元素的左边缘从正常位置向右移动的距离

3. 当position设置static，left属性没有影响

注2：关于left的取值问题：

1. 如果是数值，那么就是指定偏移的固定距离

2. 如果是百分比，那么就是相对父容器的宽度来计算

CSS布局奇淫巧计之-强大的负边距相关推荐

最新文章

热门文章