margin对文档流中元素的影响

margin表现

• block元素可以使用四个方向的margin值

• inline元素使用上下方向的margin值无效

• inline-block使用上下方向的margin负值看上去无效

• margin-top和margin-left会改变元素的位移，CSS读取宽高不变。
• margin-bottom和nargin-right会改变元素供CSS读取宽高，元素位移不变。

重叠

• 两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容
• 当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容
• 当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话， 后面的元素覆盖前面的元素
• 总结：在普通流布局中，浏览器将页面布局分为内容和背景，内容的层叠显示始终高于背景。block元素分为内容和背景，而inline元素或inline-block元素，它本身就是内容(包括其背景等样式设置)

负值

1、原理：

• 负margin元素是不会破坏页面的文档流。
• 设置左右margin负值会增加元素的宽度（该元素没有设定width属性或width:auto）
• margin-top设置负值不会增加元素高度，只会产生向上的位移，同时所有跟随的元素都会被上移。
• margin-bottom设置负值不会产生位移，只会减小元素供CSS读取的高度，同时所有跟随的元素都会被上移。

2、对普通文档流中元素（指不是浮动元素也不是绝对定位、固定定位的元素等）的影响

负边距对由普通文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，这种偏移不同于相对定位（通过相对定位偏移后的元素仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入），通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。
文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。

转载于:https://www.cnblogs.com/embrace-ly/p/10963495.html