大家好，这里是修真院前端小课堂，今天给大家分享的是
《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 时，元素视觉位置不变，但其后（下面 / 右边）的元素会被拉向此元素，相对此元素进行偏移并覆盖此元素。
不脱离文档流不使用 float 的话，负 margin 元素是不会破坏页面的文档流。
3、对浮动元素的影响
负 margin 会改变浮动元素的显示位置。
4、对绝对定位的影响
对于绝对定位元素，负 margin 会基于其绝对定位坐标再偏移，
唯一的缺点就是你必须知道这个觉得定位元素宽度的和高度才能并设置负 margin 值使其居中浏览器窗口，若对于不确定宽度和高度可以用 transform: translate3d (-50%,-50%,0);
margin 负值在页面布局中有哪些应用？
1、左右固定，中间自适应（双飞翼）
2、去除列表右边框
3、多列等高
4、负边距 + 定位：水平垂直居中
双飞翼 demo：https://ptteng.github.io/PPT/demo/css-08-margin%20apply/margin-demo6.html
多列等高 demo：https://ptteng.github.io/PPT/demo/css-08-margin%20apply/margin-demo8.html
参考文献：
【欢迎加IT交流群565763832与大家一起讨论交流】