margin
margin作为css中最常用的属性之一，但是在使用过程中我发现对于margin的正值用的很顺畅，但是设置负值就会出现各种各样奇奇怪怪的现象，所以整理一份笔记帮助自己理解margin这个属性。
正值
正值没什么好说的，哪个方向设多少就在哪个方向增加多少外边距。
负值
这里主要整理一下负值的知识点。
基础知识
margin的设置会影响元素的表现形式，那么我们首先要知道决定元素表现形式的三要素，这会对之后的知识点的理解有重大帮助：
- margin设置的方向
- 元素是否浮动
- 元素的定位方式
具体表现形式
元素无浮动无定位
- 敌不动我动：margin-top和margin-left为负，元素向该方向移动。
- 我不动敌动：margin-right和margin-bottom为负，该元素不动，该方向的相邻元素会移动相应的距离覆盖到该元素。
- 这种情况下如果元素没有设置宽度，那么设置了margin-left和margin-right之后元素的宽度会增加，和padding一个效果。
未设置宽度、margin的图示：
未设置宽度、设置margin的图示：
元素无浮动，定位为relative
表现形式和无定位无浮动一致。
元素无浮动，定位为absolute
- margin-top和margin-left和无浮动无定位一样。
- margin-right和margin-bottom无效果，因为脱离了文档流。
元素设置了浮动
（float元素是包裹在他们的block元素中浮动的，不会超出父级block元素）
- 浮动方向和margin方向一致时，元素向相应的方向移动相应的距离。
- 浮动元素和margin方向不一致，元素本身不动，相邻元素向该元素移动相应的距离。
参考文章：