这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【 margin负值在页面布局中有哪些应用？】
标题：
【修真院web小课堂】margin负值在页面布局中有哪些应用？
开场语：
大家好，我是IT修真院北京分院第37期的学员顾仁鹏，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css任务8，深度思考中的知识点——margin负值在页面布局中有哪些应用？
（1）背景介绍：
CSS盒模型中，margin是我们非常熟悉的一个属性，大多数情况下，我们采用的都是正数的 margin 值，可能有时候会用到负的 margin 值。
很多人都觉得，负的 margin 值总是可能出现莫名其妙的问题，所有不愿使用。但是，本文要说明的就是，负的 margin 值并不是 hack，这是正常范围内的写法。
根据 W3C，margin 是能够接受负值的，只是在具体实现上有一些区别。那么，设置margin为负值究竟会是什么样的效果呢？
（2）知识剖析：
负margin的特性
首先我们先了解margin的性质
负margin就是在缩小自身的边界
在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。
负margin是绝对标准的CSS
不脱离文档流，不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。
对浮动，定位的影响
负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。
对于绝对定位元素，负margin会基于其绝对定位坐标再偏移
（3）常见问题：
负margin对布局有哪些应用？
（4）解决方案：
1.双飞翼
2.去除边框
（5）编码实战：
（6）拓展思考：
1.bootstrap4中负margin的默认样式
2.利用负margin居中
3.负margin自适应布局
（7）参考文献：
（8）更多讨论：
Q1：提问人：
双飞翼还可以怎么实现？
A1：回答人（可以是分享人，也可以是其他学员）：还可以利用生成bfc实现。
Q2：提问人：负Margin元素重叠问题？
A2：回答人（可以是分享人，也可以是其他学员）：
1.两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容
2.当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容
3.当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话， 后面的元素覆盖前面的元素
Q3：提问人：
不设置宽度时，负margin会怎么样？
A3：回答人（可以是分享人，也可以是其他学员）：margin-right负值会加宽而且出现横拉条。
（9）鸣谢：
感谢郭晨阳师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地