引子
- 解决一个问题的关键在于马上着手去解决这个问题。我们都觉得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
样式也加上,是因为我发现,要想把这个负值的概念理解的很透彻,经过我的多次实践,一定要采取这种自底向上的,完全展现整个过程的变化,才能说真的理解了这个概念。 真正的原因如下
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变小的情况
这是一个伟大分界线,临界值
第四步 margin-left: 30px变小变为0了
又是一条伟大分界线,开辟了二次元
第五步 margin-left: 30px变小变为负值了
又是一条伟大分界线,与body的outline重合
第六步 margin-left: 30px变小变为-30px了
又是一条伟大分界线,都超出天际了,还能小
第七步 margin-left: 30px变小变为-60px了
至此,整个过程分析完毕,可以肯定一个结论了:margin-left变大,content的宽度变小,理解为挤扁了,margin-left变小,content的宽度变大,理解为外扩了
- 接下来我将继续探索margin-bottom为负的情况,因为这个会改变父元素的高度
以上就是我总结的结论。 很喜欢张鑫旭老师的一段话,今天就以张老师的关于CSS学习瓶颈的一段话,来结束这篇文章。
理解的对错
每个人的成长经历不同,大脑擅长处理的东西也不同,导致其看待与理解事物的方式也不同。因此,对于同一CSS表现的差异,每个人的理解都不同。
一旦有所差异,就有所谓的“对错”之争。估计不少人会拿《CSS权威指南》上的东西说事:你那种理解是错误的,CSS权威指南上说……或W3C官方文档解释说……
我大学电路老师最后一节课专门讲了她的科学观:何为科学?能够自圆其说,自成体系即是科学。中医算科学吗?算!因其有一套自己解释畅通的理论体系。 同样,对于CSS的理解,我个人一直认为什么对错的争执等都是没有意义的。如果你的解释可以自圆其说,自成体系,且应用无误,哪怕你的解释与什么规范啊权威啊八竿子都打不着,别人压根理解不了,你都是对的,OK的!
拘泥只会限制自身的创造力以及认知能力。火影的世界算是世界吗?是,自圆其说,自成体系!海贼王的世界算是世界吗?是自圆其说,自成体系。
因此,如果你是设计出身,或文学出身的。什么复杂逻辑,深奥解释理解不了,你大可摒弃之,用你自己的世界去解释其表现,你的感性思维以及艺术情怀只会让这个世界变得更精彩!那些自以为是,抱残守缺的杂碎们就不用鸟他们,让他们随着时间消逝去吧~~