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为例来演示,看官们也可以管中窥豹。
<!-- HTML的核心代码-->
<div class="container">
    <div class="box1">测试margin为负值的情况</div>
</div>

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样式也加上,是因为我发现,要想把这个负值的概念理解的很透彻,经过我的多次实践,一定要采取这种自底向上的,完全展现整个过程的变化,才能说真的理解了这个概念。
真正的原因如下

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

实验的目的:改变margin-left的负值的大小,观察他的移动方向,而containerdiv的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的!

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

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



文章作者: 吴少林
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 吴少林 !
 上一篇
JavaScript标准库之数组 JavaScript标准库之数组
学习任何编程语言,数组都是绕不过去的坎,每个编程语言都在其标准库里面内置了功能强大的Array对象。通过参考阮一峰教程和MDN,我把数组常见的方法以及一些误区总结如下,内容较多,而且会继续补充,希望这一篇文章可以把数组的知识一网打尽。
2018-01-02
下一篇 
前端校验图片尺寸 前端校验图片尺寸
这篇文章主要记录最近实习工作中遇到的前端检查图片尺寸的问题,在这个过程明白的一些道理。 我由于目前的水平有限,只能借助网络来完成这个功能。在这个查找的过程中,发现很多博客都写的有问题,虽然表面完成了,但是一测试,很多不对的地方,感觉都是
2017-12-28
  目录