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

文章https://www.cnblogs.com/2050/archive/2012/08/13/2636467.html

负边距会让元素在文档中的位置发生偏移，但是这种偏移不同于相对定位。
负边距：进行偏移的元素，它会放弃偏移前占据的空间
定位偏移：仍然会坚守它原来占据的空间，不会让文档流的其他元素趁虚而入

文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。

在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不管你实际的尺寸是多少

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

场景：中间需要带间隔的部分需要怎么做
想法：子元素设置margin-right。问题：需要将靠近右边界的子元素的margin-right设置为0
做法：margin-right:-20px 等于是将ul的宽度增加了20px

负边距 - 图1

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         body,
  10.         ul,
  11.         li {
  12.             padding: 0;
  13.             margin: 0;
  14.         }
  16.         ul,
  17.         li {
  18.             list-style: none;
  19.         }
  21.         .container {
  22.             height: 210px;
  23.             width: 460px;
  24.             border: 5px solid #000;
  25.         }
  27.         ul {
  28.             height: 210px;
  29.             overflow: hidden;
  30.             margin-right: -20px;
  31.         }
  33.         /*一个负的margin-right,相当于把ul的宽度增加了20px*/
  34.         li {
  35.             height: 100px;
  36.             width: 100px;
  37.             background: #09F;
  38.             float: left;
  39.             margin-right: 20px;
  40.             margin-bottom: 10px;
  41.         }
  42.     </style>
  43. </head>
  45. <body>
  46.     <div class="container">
  47.         <ul>
  48.             <li>子元素1</li>
  49.             <li>子元素2</li>
  50.             <li>子元素3</li>
  51.             <li>子元素4</li>
  52.             <li>子元素5</li>
  53.             <li>子元素6</li>
  54.             <li>子元素7</li>
  55.             <li>子元素8</li>
  56.         </ul>
  57.     </div>
  58. </body>
  60. </html>

负边距对浮动元素的影响

文档流中元素的位置由文档的走向决定，浮动的元素也可以看成一个“浮动流”存在，不过浮动流既可以向左，也可以向右

relative该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）

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

绝对定位的元素定义的top right bottom left 等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外拓的，如果margin为负的时候，则它的边界是向里收的。

image.png