摘要：前情提要本人是一个学渣非科班入行年了吧前端东西真的好多啊又不断更新需要不断的学学学在去年年底开始我就开始不断的寻找学习的方法如何更加高效的学习如何才能学的又快又好在这半年来不断的总结慢慢找到了一些方法和诀窍此文章不是网格布局的教学文章只
前情提要本人是一个学渣,非科班入行2年了吧,前端东西真的好多啊,又不断更新.需要不断的学学学,
在去年年底开始,我就开始不断的寻找学习的方法,如何更加高效的学习,如何才能学的又快又好,在这半年来,不断的总结,慢慢找到了一些方法和诀窍.
此文章不是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,没啥特别的,直接看看效果
嗯!除了一格格的,看起来没啥特别
重复这一步,不看文字解释,直接把代码复制到编辑器
这里有的人可能会有疑问");根据已学的知识或者经验,去判断未知的知识或者经验,这一个过程,让你的大脑充分的思考,形成从已有旧知识到新的未知知识的连接
可能又有的人会说,猜不对怎么办");猜的对不对其实不是关键,最重要是我们从实际的例子中去推断出规律,这个过程我们充分调用了大脑,比直接走马观花看文档来的深刻,有效!
好了,猜完之后去看看效果
没毛病,两行三列,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格到第四格的意思吗");
看看效果
大概按照这种思路,大概去摸索一些例子,并记录下来
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笔记下面写上一个日程表,
这是markdown的语法,例如今天学完,隔3天复习,今天是5.17,第三天复习就是5月20,在你手机待编事项5月20号上面写上,复习Grid布局,等20号复习了之后,又在待办事项在第10天复习的日期记录一个复习Grid布局,等到那天又会提醒你今天要复习Grid布局了,充分利用工具去督促你复习,复习很简单,就是回顾,看你记得多少,基本经过6,7次复习,就能很长时间的记在你脑海里了,并且随着熟悉程度越来越高,复习也越来越快
最后
这里只是拿Grid布局举了个例子,如果遇到有些新的知识,你确实没办法猜测和分析,可能说明2个问题
这个新的知识对你来说有点过于颠覆性,旧的知识完全帮不上(其实这种情况应该挺少的)
说明你分析能力和创造力或者说是联想力还不够,多多这样去尝试,慢慢就会提高自己的分析能力
当然,这只是学习技巧里面的一个小点,学习这件事情真的是复杂又好玩,不是三言两句能讲的清楚,其实方法还有很多很多,可能后面会介绍更多自己发掘的一些学习方法.不喜勿喷,欢迎评论
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/6772.html
摘要：学不动了，那就来点有趣的本着折腾的性格，一直想写一个完全由我个人完成的动画，终于在前段时间完成了的重写，并完善了，先看看动画效果如何可以在这里查看不同动画组合成的效果，也可以在上查看具体的代码编写。 前言 这不 webpack 又升级了。。。 前端的发展可谓是异常的迅速，各大框架层出不穷，每当有新框架出现，或是老框架升级，评论区总是哀嚎遍野，学不动了，真的学不动了。 学不动了，那就来点...
摘要：学不动了，那就来点有趣的本着折腾的性格，一直想写一个完全由我个人完成的动画，终于在前段时间完成了的重写，并完善了，先看看动画效果如何可以在这里查看不同动画组合成的效果，也可以在上查看具体的代码编写。 前言 这不 webpack 又升级了。。。 前端的发展可谓是异常的迅速，各大框架层出不穷，每当有新框架出现，或是老框架升级，评论区总是哀嚎遍野，学不动了，真的学不动了。 学不动了，那就来点...
摘要：可中断的如果的存在超出暂停目标的可能性，则使其可被中止。未使用分配内存即时返回增强垃圾收集器，以便在空闲时自动将堆内存返回给操作系统。 showImg(https://segmentfault.com/img/remote/1460000018584818); 写在前面 看到 JDK 12又发布了，萌新不知不觉感觉瑟瑟发抖，从 Java 1.8的函数式编程思维和范式 到 Java 1...
摘要：一切都那么美好，除了让人恶心的初代布局。第二个，豆腐块布局。那么就开始看看第四代网络布局神奇布局的强大之处。 showImg(https://segmentfault.com/img/bVbenWU?w=500&h=500); 一转眼已经2018年，前端行业也风风雨雨的走过了10多年，网页布局也从最原始的文档变成成了当前精彩纷呈的交互。当我看到第四代css布局技术网格布局的时候，就像我...
摘要：一切都那么美好，除了让人恶心的初代布局。第二个，豆腐块布局。那么就开始看看第四代网络布局神奇布局的强大之处。 showImg(https://segmentfault.com/img/bVbenWU?w=500&h=500); 一转眼已经2018年，前端行业也风风雨雨的走过了10多年，网页布局也从最原始的文档变成成了当前精彩纷呈的交互。当我看到第四代css布局技术网格布局的时候，就像我...
阅读 3541·2023-04-25 19:07
阅读 3317·2021-11-22 12:02
阅读 2943·2021-10-12 10:11
阅读 3442·2021-09-03 10:49
阅读 2780·2019-08-30 13:21
阅读 2868·2019-08-30 11:14
阅读 1994·2019-08-29 15:40
阅读 2762·2019-08-28 18:29
