margin为负值时, 对布局的影响

-------------------------------------------------------

 

 

详细参考: https://www.jianshu.com/p/549aaa5fabaa

 

 

关于margin的一点简单粗暴的小理解:

　　1, margin不会影响到内容区, 或者说甚至不会影响到border及内部的任何一部分区域, 只是会影响盒子的布局.

　　2, 关于布局的时候, 可以理解为这两个过程:

　　　　第一步: 将盒模型视作一个margin为0的盒子

　　　　第二步:从border边界开始, 将盒子砍去各个方向上的margin, 剩下一个内部的小矩形, 这个小矩形视作一个新的小盒子进行布局.

　　　　第三步:布局(对齐)完成之后, 原盒子被margin砍去的部分重新恢复, 重新恢复时势必会造成两方元素部分重叠的问题

　　　　第四步:重叠部分选择性显示

　　　　　　　　　　基本原则:　　显示主动侵蚀其它盒子的那一方.(左方和上方)-------->

　　　　　　　　　　这也可以很好的解释   配合上布局时规则是自动对齐左方和上方,  上方只造成位移, 左右方除了位移还会可能造成宽度扩展, 下方只能是减少显示区域部分

　　　　　　　　　　---

 

注意点:

　　元素侵蚀问题不发生在父元素与子元素身上, 只发生在同级元素上面