margin负值在页面布局中有哪些应用？
大家好，我是IT修真院郑州分院第七期的学员冯亚超，一枚正直纯洁善良的WEB程序员 今天给大家分享一下，margin负值在页面布局中有哪些应用？
一、背景介绍
CSS盒模型中，margin是我们非常熟悉的一个属性，大多数情况下，我们采用的都是正数的 margin 值，可能有时候会用到负的 margin 值。在我们的印象中，负的 margin 值就类似于浏览器的 hack 一样，不被人接受。但是，本文要说明的就是，负的 margin 值并不是 hack，这是正常范围内的写法。
根据 W3C，margin 是能够接受负值的，只是在具体实现上有一些区别。那么，设置margin为负值究竟会是什么样的效果呢？
二、知识剖析
MARGIN为负值时产生的影响
1、对于自身的影响
当static(非浮动、非定位）元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。
但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。
如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。
2、对文档流的影响
元素如果用了margin-left/margin-top时，元素自身会被拉向左/向上进行偏移，效果类似与position：relative。与之不同的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。
元素如果用了margin-right/margin-bottom时，元素视觉位置不变，但其后（下面/右边）的元素会被拉向此元素，相对此元素进行偏移并覆盖此元素。
3、对浮动元素的影响
负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。
4、对绝对定位的影响
对于绝对定位元素，负margin会基于其绝对定位坐标再偏移
三、常见问题
MARGIN负值在页面布局中有哪些应用？
四、解决方案
1、左右固定，中间自适应（双飞翼）
2、去除列表右边框
3、多列等高
五、编码实战
undefined_腾讯视频
六、拓展思考
MARGIN负值是否会改变元素的宽度？
这取决于是否给了元素宽度,如果已经给了元素宽度,那么margin负值不会影响元素的宽度,如果没有给元素宽度,那么margin会影响元素的宽度.
七、参考文献
http://blog.csdn.net/twoto3_/article/details/52250602
八、更多讨论
margin负值还能运用到哪些地方？
双飞翼布局,圣杯布局或者垂直居中
Q1:提问人:王栋
问题:圣杯布局使用flex方便还是margin负值方便?
A1:回答人:冯亚超
回答:1.圣杯布局我个人任务是使用flex方便,因为如果使用margin负值会有很多的地方要注意,而且不容易维护.
Q2:提问人:王栋
问题:怎么利用绝对定位和margin负值实现垂直居中？
A2:回答人:冯亚超
回答:利用绝对定位和margin负值实现垂直居中需要知道元素的高度,然后给绝对定位一个50%,再给一个margin-top: -50%就可以实现了.
Q3:提问人:王栋
问题:为什么 设置margin负值会覆盖上面的div，而不是在下面？
A3:回答人:冯亚超
回答:主要原因还是因为文档流,设置margin负值的时候会影响文档流布局
感谢大家观看！
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
获得更多IT技能，请移步官网 点击链接直达：http://www.jnshu.com/login/1/17884272
