margin为负值的分析

引子

解决一个问题的关键在于马上着手去解决这个问题。我们都觉得CSS难学，那么就抓紧时间去学，去学，去学

margin的概念

margin是盒模型中一个很重要的概念，是border之外的区域，我们通常称作外边距，有margin-top,margin-right,margin-bottom.moargin-left四个外边距。注意我书写的顺序是从上开始顺时针的顺序。
对于这四个值，我们在设置的时候必然只能有4种情况：一个值、两个值、三个值、四个值。

第一种：margin: 10px; 表示四个外边距全都是10px;

第二种：margin: 10px 5px 10px 5px; 表盘上按照从上开始顺时针转一圈，分别表示上外边距10px、右外边距5px、下外边距10px、左外边距5px;

第三种：margin: 10px 5px; 只有两个数字，上、右都有了，另外的两个去哪找呢。众所周知表盘是对称的，那么第一个数是上外边距和下外边距10px、右外边距和左外边距5px;

第四种：margin: 10px 5px 10px; 只有三个数，那么还是用对称来找，第二个右外边距依然对应左外边距，那么结果就显而易见了。上外边距10px、左外边距和右外边距5px、下外边距10px；

以上第二种是核心，方便理解其他的三种方式。同理，padding也是这个顺序。
上面这些必备知识，对于任何一个自学的前端，相信都会，没有任何新意。

接下来，我们探讨一下，以margin为例，它的值是负数的时候意味着什么呢？这是一个很有趣的实验，对于像我一样的新人来说，负值这个概念还是挺奇怪的，我是理解了好一会才搞明白的。

先上栗子

以margin的margin-left为例来演示，看官们也可以管中窥豹。



    测试margin为负值的情况

demo很简单，就是一个大div包裹了一个小div。由简单入手，正是删繁就简三秋树，领异标新二月花。
下面是CSS的代码

html{
  border: 1px solid green;
}
body{
  outline: 1px solid orange;
}
.container{
  border: 1px solid red;
  margin-left:30px;
}
.box1{
  margin: 10px;
  outline: 1px solid blue;
  margin-left: -30px;
}

之所以把html以及body样式也加上，是因为我发现，要想把这个负值的概念理解的很透彻，经过我的多次实践，一定要采取这种自底向上的，完全展现整个过程的变化，才能说真的理解了这个概念。
真正的原因如下

html的border让我们发现body的默认外边距是8px
body的outline让我们直观的体会改变box1的margin-left的时候是如何变化的（我假设大家都知道改变左外边距会类名是container的div的border）
至于body box我没有用border，是因为这个border的宽度会影响图片的效果，进而影响理解。我是用了outline来替代border,它的作用和border一样，也是让我们知道我们要观察的元素的到底在网页的什么位置，人类还是以直观展现为主，太抽象不利于分析，不过他没有宽度，只要颜色。

实验的目的：改变margin-left的负值的大小，观察他的移动方向，而container的div的margin-left:30px;的设置正是确立边界，我通过对比margin-left的负值的大小与移动方向、移动距离来推论
下面我们具体分析整个过程，以下面的图的变化来分析。
通常科学的分析方法是找临界值，我采用的是去问题的的对立面来找线索，要分析负值，我们先看margin是正值的情况。

由正值变为 0 再变为负值不正是一个科学探索的过程吗
首先，要记得margin-left的第二次赋值会改变他的第一次值，也就是页面显示的永远是你最后赋的值。

第一步 margin-left: 30px的情况

margin-left: 30px的情况的图

如图所示，效果很直观。margin-left第二次赋值为30px,覆盖了它的初始值10px。图中绿色是html的border,橘黄色是body的outline,大div的border是红色，内部的box1outline是蓝色。

第二步 margin-left: 30px变大的情况

margin-left: 30px变大的情况的图

对比上述两个图，很容易的发现：margin-left变大，content的宽度变小，理解为挤扁了

第三步 margin-left: 30px变小的情况

margin-left: 30px变小的情况的图

对比二、三步的图发现，margin-left变小，content的宽度变大，理解为外扩了，当让了，此时还没分析完，我们不能很确定这个结论，继续变小，来分析。

这是一个伟大分界线，临界值

第四步 margin-left: 30px变小变为0了

margin-left: 30px变小变为0了的图

又是一条伟大分界线，开辟了二次元

第五步 margin-left: 30px变小变为负值了

margin-left: 30px变小变为负值了的图

又是一条伟大分界线,与body的outline重合

第六步 margin-left: 30px变小变为-30px了

margin-left: 30px变小变为-30px了的图

又是一条伟大分界线,都超出天际了，还能小

第七步 margin-left: 30px变小变为-60px了

margin-left: 30px变小变为-60px了的图

至此，整个过程分析完毕，可以肯定一个结论了：margin-left变大，content的宽度变小，理解为挤扁了，margin-left变小，content的宽度变大，理解为外扩了

接下来我将继续探索margin-bottom为负的情况，因为这个会改变父元素的高度

以上就是我总结的结论。
很喜欢张鑫旭老师的一段话，今天就以张老师的关于CSS学习瓶颈的一段话，来结束这篇文章。

理解的对错

每个人的成长经历不同，大脑擅长处理的东西也不同，导致其看待与理解事物的方式也不同。因此，对于同一CSS表现的差异，每个人的理解都不同。

一旦有所差异，就有所谓的“对错”之争。估计不少人会拿《CSS权威指南》上的东西说事：你那种理解是错误的，CSS权威指南上说……或W3C官方文档解释说……

我大学电路老师最后一节课专门讲了她的科学观：何为科学？能够自圆其说，自成体系即是科学。中医算科学吗？算！因其有一套自己解释畅通的理论体系。
同样，对于CSS的理解，我个人一直认为什么对错的争执等都是没有意义的。如果你的解释可以自圆其说，自成体系，且应用无误，哪怕你的解释与什么规范啊权威啊八竿子都打不着，别人压根理解不了，你都是对的，OK的！

拘泥只会限制自身的创造力以及认知能力。火影的世界算是世界吗？是，自圆其说，自成体系！海贼王的世界算是世界吗？是自圆其说，自成体系。

因此，如果你是设计出身，或文学出身的。什么复杂逻辑，深奥解释理解不了，你大可摒弃之，用你自己的世界去解释其表现，你的感性思维以及艺术情怀只会让这个世界变得更精彩！那些自以为是，抱残守缺的杂碎们就不用鸟他们，让他们随着时间消逝去吧~~