前情提要
本人是一个学渣,前端东西真的好多啊,又不断更新.需要不断的学学学,
在去年年底开始,我就开始不断的寻找学习的方法,如何更加高效的学习,如何才能学的又快又好,在这半年来,不断的总结,慢慢找到了一些方法和诀窍.
此文章不是Grid网格布局的教学文章,只是借用Grid网格布局来说明学习的问题
对于学霸或者大佬来说,我可能只是在班门弄斧,不喜勿喷,希望能给大家有所帮助吧
常见的学习方式
这里用学习Gird网格布局举个例子,可能很多人学习这样一项新的的知识,会是这样.
-
打开百度找一下Gird网格布局的教程或者w3c等权威网站等,例如看到了这一片CSS Grid 网格布局教程(阮一峰)的文章(这一篇是阮一峰大佬写的文章,还是十分通俗易懂的).
-
然后把文章通篇看了一遍,这一篇看下来还是蛮多属性的,可能会一边看一边敲.
-
看完可能再大概实践一下,基本就完事了
在这种情况下,如果不是工作中会经常使用,隔了一段时间之后,又会忘得一干二净,也没有经过深层次的思考和记忆,下次看可能又要重新看,重新理解一边,有很多类似这样的知识,看了就自我感觉懂了,然后又丢一边,如此反复,需要的知识太多.总是感觉学也学不完.
学习要按照大脑的思维方式
大家回想一下,很多成功人士的讲座,总会讲一堆有趣的故事,然后把结论告诉你,又如奇葩说(不知道大家有没有看过,一个辩论类的综艺节目),总是利用一个个例子去说明观点的正确,而不是直接把观点抛给你,而是需要一步步引导你,让你觉得这个观点这个结论是正确的,所以学习一个很重要的就是例子!
这个是人教版的初中物理课本,讲牛顿第一定律,看到了吗,就像课本一样,让你学习一个新的东西是先给你一些生动例子,和生活中熟悉的事物联系起来,然后调动你的好奇心和求知欲,而不是一上来就告诉你结论.
但是网络上很多编程的文档,很多技术贴,都是直接告诉你,你需要怎么做,有多少个属性,使用会有什么效果.当然,这样并没有问题,人家本来就不是老师,也不要顾及每个人的学习,只是出于分享知识,总结一下,再附上几个例子就好了.
更好的学习方法
这里用到学习Grid网格布局来举例子
1.我们首先上百度或者google搜索一下,这里就用百度吧,搜索一下 Grid布局实例
对!这里没弄错,我们不是直接去搜索Grid布局有什么属性,先绕过去,去搜索Grid的实例,实例就像故事一样比结论来的生动有趣!
2.点击第一个打开看看,附上链接快速使用CSS Grid布局，实现响应式设计
重点来了!!!
3.不要仔细看文字,直接找到代码部分,复制到编辑器中打开,仔细看看代码,我们要用已学的旧知识去推断去分析(重点:推断和分析)
.wrapper {
display: grid;
}
"wrapper">
1
2
3
4
5
6
复制代码这段代码,很明显,你没学过Grid布局也能猜出来,flex布局是display:flex,那么Grid布局就肯定是display:grid,没毛病,这是我们学到的第一个属性,然后wrapper里面有6个小div,没啥特别的,直接看看效果
嗯!除了一格格的,看起来没啥特别
重复这一步,不看文字解释,直接把代码复制到编辑器
这里不懂英文可以有道一下,下面两个属性意思分别 网格-模板-列 网格-模板-行,猜测一下.因为一般定制这些名词的都是行业的领军者,基本上也不会随便设定,都是尽量让属性或者知识更加通俗易懂简单明了,或者更符合程序员的思维.很明显的就是网格的行和列属性,后面分别是3个100px,和2个50px,再大胆猜测一下,是否是有3列,分别为100px,2行分别为50px呢?这里有的人可能会有疑问?为什么要这样?我们为什么要猜?其实猜不是瞎猜,是有理有据的猜,是根据我们已有的模型,也就是根据已学的知识或者经验,去判断未知的知识或者经验,这一个过程,让你的大脑充分的思考,形成从已有旧知识到新的未知知识的连接
可能又有的人会说,猜不对怎么办?猜的对不对其实不是关键,最重要是我们从实际的例子中去推断出规律,这个过程我们充分调用了大脑,比直接走马观花看文档来的深刻,有效!
好了,猜完之后去看看效果
没毛病,两行三列,100px,50px,这个时候我们为了验证我们的想法,改改代码试试?
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px 100px 50px;
grid-template-rows: 50px 50px 30px;
}
复制代码看看效果
没毛病,和想想中的一样,这是一个探索求知的过程,比直接看文档来的生动有趣,就像游戏一样,不断去挖掘广阔的世界,去挖掘未知的事物再往下
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
"wrapper">
"item1">1
"item2">2
"item3">3
"item4">4
"item5">5
"item6">6
复制代码变成了这样的.重复之前的步骤,先分析 这里又新增了两个属性 grid-column-start grid-column-end,这里从字面意思,就是列的开始到列的结束,大胆猜测一下,难道这里是从第1格到第四格的意思吗?一共占4格?或者占3格?第1格到第四格前?(后面学习才知道,原来这里指的是边框,但是没关系,这里只是猜测)
看看效果
第一个item占了3格,唔,这时候可能我们会觉得前面的猜测没有问题,可能是之前猜测的第1格到第4格前的意思,虽然这里和实际意思有点出入,但是没关系,我们这时候还是一个探索的过程大概按照这种思路,大概去摸索一些例子,并记录下来
- display:grid 容器属性,是设置网格布局
- grid-template-columns: 容器属性,是设定有多少列,宽度为
- grid-template-rows:容器属性,是设定有多少行,高度为
- grid-column-start:项目属性,是从第几格起
- grid-column-end:项目属性,是第几格前结束
- .....
当你自己总结了一些规律之后,再去看文档,再去看正确的技术贴,例如再翻回之前阮一峰的那篇Grid的帖子,你可能会发现哦,原来grid-column-start和grid-column-end指的是网格线,是从第一根网格线到第四根.猜错的不要紧!反而可能让你更加印象深刻!,然后再把自己的总结改一下,再去看看之前的那些例子,你会发现,豁然开朗.
4.最后一步,关闭所有页面,打开一个新的空白笔记本,或者是空白xmind,回顾!
重复看10次,不如脑海里凭空回顾一次,在一个空白页上面,去回顾自己刚才学到的东西,一个个写出来,到底有哪些属性,哪些知识,每个属性又是干嘛的?你会发现,经过你猜测分析的属性,你都深深的记在了脑海里.回顾完之后再对比文档或者教程,看看有什么遗漏的,遗漏的地方就是你还不是特别熟悉的地方.
整个过程是
接触新知识的例子 => 去猜测其中的规律 => 去验证自己的想法 => 对着正确的文档校对 => 合上书本回顾
你会调动整个脑袋,参与其中,去思考,去猜测,去实践,这才是真正有效的学习新知识!
还没结束
上面只是讲到第一次学习新知识的过程,但是无论你第一次记得再好,你总会遗忘,这时候就需要记录,隔一段时间重复一次,因为我们是探索,分析,总结出来的知识,所以会比较深刻,不需要短时重复!根据实际情况而定,在你的markdown笔记下面写上一个日程表,
- 第3天复习 2019.5.7
- 第10天复习 2019.5.14
- 第21天复习
- 第30天复习
- 第60天复习
- 第90天复习
这是markdown的语法,例如今天学完,隔3天复习,今天是5.17,第三天复习就是5月20,在你手机待编事项5月20号上面写上,复习Grid布局,等20号复习了之后,又在待办事项在第10天复习的日期记录一个复习Grid布局,等到那天又会提醒你今天要复习Grid布局了,充分利用工具去督促你复习,复习很简单,就是回顾,看你记得多少,基本经过6,7次复习,就能很长时间的记在你脑海里了,并且随着熟悉程度越来越高,复习也越来越快
最后
这里只是拿Grid布局举了个例子,如果遇到有些新的知识,你确实没办法猜测和分析,可能说明2个问题
- 这个新的知识对你来说有点过于颠覆性,旧的知识完全帮不上(其实这种情况应该挺少的)
- 说明你分析能力和创造力或者说是联想力还不够,多多这样去尝试,慢慢就会提高自己的分析能力
当然,这只是学习技巧里面的一个小点,学习这件事情真的是复杂又好玩,不是三言两句能讲的清楚,其实方法还有很多很多,可能后面会介绍更多自己发掘的一些学习方法.不喜勿喷,欢迎评论