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

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

负边距对浮动元素的影响

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

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

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

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

image.png