盒子
盒子
文章目录
  1. 引子
  2. margin的概念
    1. 先上栗子
    2. 第一步 margin-left: 30px的情况
    3. 第二步 margin-left: 30px变大的情况
    4. 第三步 margin-left: 30px变小的情况
    5. 第四步 margin-left: 30px变小变为0了
    6. 第五步 margin-left: 30px变小变为负值了
    7. 第六步 margin-left: 30px变小变为-30px了
    8. 第七步 margin-left: 30px变小变为-60px了
    9. 理解的对错

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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的!

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

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