學(xué)不動(dòng)了?可能方法不太對-Grid 網(wǎng)格布局

happyfish 發(fā)布于2019-05-22 16:41 / 1502人閱讀

摘要：前情提要本人是一個(gè)學(xué)渣非科班入行年了吧前端東西真的好多啊又不斷更新需要不斷的學(xué)學(xué)學(xué)在去年年底開始我就開始不斷的尋找學(xué)習(xí)的方法如何更加高效的學(xué)習(xí)如何才能學(xué)的又快又好在這半年來不斷的總結(jié)慢慢找到了一些方法和訣竅此文章不是網(wǎng)格布局的教學(xué)文章只

前情提要

??本人是一個(gè)學(xué)渣,非科班入行2年了吧,前端東西真的好多啊,又不斷更新.需要不斷的學(xué)學(xué)學(xué),

??在去年年底開始,我就開始不斷的尋找學(xué)習(xí)的方法,如何更加高效的學(xué)習(xí),如何才能學(xué)的又快又好,在這半年來,不斷的總結(jié),慢慢找到了一些方法和訣竅.

??此文章不是Grid網(wǎng)格布局的教學(xué)文章,只是借用Grid網(wǎng)格布局來說明學(xué)習(xí)的問題

對于學(xué)霸或者大佬來說,我可能只是在班門弄斧,不喜勿噴,希望能給大家有所幫助吧

常見的學(xué)習(xí)方式

這里用學(xué)習(xí)Gird網(wǎng)格布局舉個(gè)例子,可能很多人學(xué)習(xí)這樣一項(xiàng)新的的知識,會(huì)是這樣.

打開百度找一下Gird網(wǎng)格布局的教程或者w3c等權(quán)威網(wǎng)站等,例如看到了這一片CSS Grid 網(wǎng)格布局教程(阮一峰)的文章(這一篇是阮一峰大佬寫的文章,還是十分通俗易懂的).

然后把文章通篇看了一遍,這一篇看下來還是蠻多屬性的,可能會(huì)一邊看一邊敲.

看完可能再大概實(shí)踐一下,基本就完事了

在這種情況下,如果不是工作中會(huì)經(jīng)常使用,隔了一段時(shí)間之后,又會(huì)忘得一干二凈,也沒有經(jīng)過深層次的思考和記憶,下次看可能又要重新看,重新理解一邊,有很多類似這樣的知識,看了就自我感覺懂了,然后又丟一邊,如此反復(fù),需要的知識太多.總是感覺學(xué)也學(xué)不完.

學(xué)習(xí)要按照大腦的思維方式

?? 大家回想一下,很多成功人士的講座,總會(huì)講一堆有趣的故事,然后把結(jié)論告訴你,又如奇葩說(不知道大家有沒有看過,一個(gè)辯論類的綜藝節(jié)目),總是利用一個(gè)個(gè)例子去說明觀點(diǎn)的正確,而不是直接把觀點(diǎn)拋給你,而是需要一步步引導(dǎo)你,讓你覺得這個(gè)觀點(diǎn)這個(gè)結(jié)論是正確的,所以學(xué)習(xí)一個(gè)很重要的就是例子!

這個(gè)是人教版的初中物理課本,講牛頓第一定律,看到了嗎,就像課本一樣,讓你學(xué)習(xí)一個(gè)新的東西是先給你一些生動(dòng)例子,和生活中熟悉的事物聯(lián)系起來,然后調(diào)動(dòng)你的好奇心和求知欲,而不是一上來就告訴你結(jié)論.

?? 但是網(wǎng)絡(luò)上很多編程的文檔,很多技術(shù)貼,都是直接告訴你,你需要怎么做,有多少個(gè)屬性,使用會(huì)有什么效果.當(dāng)然,這樣并沒有問題,人家本來就不是老師,也不要顧及每個(gè)人的學(xué)習(xí),只是出于分享知識,總結(jié)一下,再附上幾個(gè)例子就好了.

更好的學(xué)習(xí)方法

?? 這里用到學(xué)習(xí)Grid網(wǎng)格布局來舉例子

1.我們首先上百度或者google搜索一下,這里就用百度吧,搜索一下 Grid布局實(shí)例

對!這里沒弄錯(cuò),我們不是直接去搜索Grid布局有什么屬性,先繞過去,去搜索Grid的實(shí)例,實(shí)例就像故事一樣比結(jié)論來的生動(dòng)有趣!

2.點(diǎn)擊第一個(gè)打開看看,附上鏈接快速使用CSS Grid布局，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)

重點(diǎn)來了!!!

3.不要仔細(xì)看文字,直接找到代碼部分,復(fù)制到編輯器中打開,仔細(xì)看看代碼,我們要用已學(xué)的舊知識去推斷去分析(重點(diǎn):推斷和分析)

 .wrapper {
            display: grid;
        }
 


    "wrapper">
        1
        2
        3
        4
        5
        6

這段代碼,很明顯,你沒學(xué)過Grid布局也能猜出來,flex布局是display:flex,那么Grid布局就肯定是display:grid,沒毛病,這是我們學(xué)到的第一個(gè)屬性,然后wrapper里面有6個(gè)小div,沒啥特別的,直接看看效果

嗯!除了一格格的,看起來沒啥特別

重復(fù)這一步,不看文字解釋,直接把代碼復(fù)制到編輯器

這里不懂英文可以有道一下,下面兩個(gè)屬性意思分別 網(wǎng)格-模板-列 網(wǎng)格-模板-行,猜測一下.因?yàn)橐话愣ㄖ七@些名詞的都是行業(yè)的領(lǐng)軍者,基本上也不會(huì)隨便設(shè)定,都是盡量讓屬性或者知識更加通俗易懂簡單明了,或者更符合程序員的思維.很明顯的就是網(wǎng)格的行和列屬性,后面分別是3個(gè)100px,和2個(gè)50px,再大膽猜測一下,是否是有3列,分別為100px,2行分別為50px呢");

這里有的人可能會(huì)有疑問");根據(jù)已學(xué)的知識或者經(jīng)驗(yàn),去判斷未知的知識或者經(jīng)驗(yàn),這一個(gè)過程,讓你的大腦充分的思考,形成從已有舊知識到新的未知知識的連接

可能又有的人會(huì)說,猜不對怎么辦");猜的對不對其實(shí)不是關(guān)鍵,最重要是我們從實(shí)際的例子中去推斷出規(guī)律,這個(gè)過程我們充分調(diào)用了大腦,比直接走馬觀花看文檔來的深刻,有效!

好了,猜完之后去看看效果

沒毛病,兩行三列,100px,50px,這個(gè)時(shí)候我們?yōu)榱蓑?yàn)證我們的想法,改改代碼試試");

.wrapper {
            display: grid;
            grid-template-columns: 100px 100px 100px 100px 50px;
            grid-template-rows: 50px 50px 30px;
        }

看看效果

沒毛病,和想想中的一樣,這是一個(gè)探索求知的過程,比直接看文檔來的生動(dòng)有趣,就像游戲一樣,不斷去挖掘廣闊的世界,去挖掘未知的事物

再往下

.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

變成了這樣的.重復(fù)之前的步驟,先分析這里又新增了兩個(gè)屬性 grid-column-start grid-column-end,這里從字面意思,就是列的開始到列的結(jié)束,大膽猜測一下,難道這里是從第1格到第四格的意思嗎");

看看效果

第一個(gè)item占了3格,唔,這時(shí)候可能我們會(huì)覺得前面的猜測沒有問題,可能是之前猜測的第1格到第4格前的意思,雖然這里和實(shí)際意思有點(diǎn)出入,但是沒關(guān)系,我們這時(shí)候還是一個(gè)探索的過程

大概按照這種思路,大概去摸索一些例子,并記錄下來

display:grid 容器屬性,是設(shè)置網(wǎng)格布局

grid-template-columns: 容器屬性,是設(shè)定有多少列,寬度為

grid-template-rows:容器屬性,是設(shè)定有多少行,高度為

grid-column-start:項(xiàng)目屬性,是從第幾格起

grid-column-end:項(xiàng)目屬性,是第幾格前結(jié)束

.....

當(dāng)你自己總結(jié)了一些規(guī)律之后,再去看文檔,再去看正確的技術(shù)貼,例如再翻回之前阮一峰的那篇Grid的帖子,你可能會(huì)發(fā)現(xiàn)哦,原來grid-column-start和grid-column-end指的是網(wǎng)格線,是從第一根網(wǎng)格線到第四根.猜錯(cuò)的不要緊!反而可能讓你更加印象深刻!,然后再把自己的總結(jié)改一下,再去看看之前的那些例子,你會(huì)發(fā)現(xiàn),豁然開朗.

4.最后一步,關(guān)閉所有頁面,打開一個(gè)新的空白筆記本,或者是空白xmind,回顧!

重復(fù)看10次,不如腦海里憑空回顧一次,在一個(gè)空白頁上面,去回顧自己剛才學(xué)到的東西,一個(gè)個(gè)寫出來,到底有哪些屬性,哪些知識,每個(gè)屬性又是干嘛的");

整個(gè)過程是

接觸新知識的例子 => 去猜測其中的規(guī)律 => 去驗(yàn)證自己的想法 => 對著正確的文檔校對 => 合上書本回顧

你會(huì)調(diào)動(dòng)整個(gè)腦袋,參與其中,去思考,去猜測,去實(shí)踐,這才是真正有效的學(xué)習(xí)新知識!

還沒結(jié)束

上面只是講到第一次學(xué)習(xí)新知識的過程,但是無論你第一次記得再好,你總會(huì)遺忘,這時(shí)候就需要記錄,隔一段時(shí)間重復(fù)一次,因?yàn)槲覀兪翘剿?分析,總結(jié)出來的知識,所以會(huì)比較深刻,不需要短時(shí)重復(fù)!根據(jù)實(shí)際情況而定,在你的markdown筆記下面寫上一個(gè)日程表,

第3天復(fù)習(xí) 2019.5.7

第10天復(fù)習(xí) 2019.5.14

第21天復(fù)習(xí)

第30天復(fù)習(xí)

第60天復(fù)習(xí)

第90天復(fù)習(xí)

這是markdown的語法,例如今天學(xué)完,隔3天復(fù)習(xí),今天是5.17,第三天復(fù)習(xí)就是5月20,在你手機(jī)待編事項(xiàng)5月20號上面寫上,復(fù)習(xí)Grid布局,等20號復(fù)習(xí)了之后,又在待辦事項(xiàng)在第10天復(fù)習(xí)的日期記錄一個(gè)復(fù)習(xí)Grid布局,等到那天又會(huì)提醒你今天要復(fù)習(xí)Grid布局了,充分利用工具去督促你復(fù)習(xí),復(fù)習(xí)很簡單,就是回顧,看你記得多少,基本經(jīng)過6,7次復(fù)習(xí),就能很長時(shí)間的記在你腦海里了,并且隨著熟悉程度越來越高,復(fù)習(xí)也越來越快

最后

這里只是拿Grid布局舉了個(gè)例子,如果遇到有些新的知識,你確實(shí)沒辦法猜測和分析,可能說明2個(gè)問題

這個(gè)新的知識對你來說有點(diǎn)過于顛覆性,舊的知識完全幫不上(其實(shí)這種情況應(yīng)該挺少的)

說明你分析能力和創(chuàng)造力或者說是聯(lián)想力還不夠,多多這樣去嘗試,慢慢就會(huì)提高自己的分析能力

當(dāng)然,這只是學(xué)習(xí)技巧里面的一個(gè)小點(diǎn),學(xué)習(xí)這件事情真的是復(fù)雜又好玩,不是三言兩句能講的清楚,其實(shí)方法還有很多很多,可能后面會(huì)介紹更多自己發(fā)掘的一些學(xué)習(xí)方法.不喜勿噴,歡迎評論