學不動了?可能方法不太對-Grid 網格佈局

時間 2019-11-06

標籤動了可能方法 grid 網格佈局简体版

原文原文鏈接

前情提要

本人是一個學渣,前端東西真的好多啊,又不斷更新.須要不斷的學學學,html

在去年年末開始,我就開始不斷的尋找學習的方法,如何更加高效的學習,如何才能學的又快又好,在這半年來,不斷的總結,慢慢找到了一些方法和訣竅.前端

此文章不是Grid網格佈局的教學文章,只是借用Grid網格佈局來講明學習的問題程序員

對於學霸或者大佬來講,我可能只是在班門弄斧,不喜勿噴,但願能給你們有所幫助吧編程

常見的學習方式

這裏用學習Gird網格佈局舉個例子,可能不少人學習這樣一項新的的知識,會是這樣.bash

打開百度找一下Gird網格佈局的教程或者w3c等權威網站等,例如看到了這一片CSS Grid 網格佈局教程(阮一峯)的文章(這一篇是阮一峯大佬寫的文章,仍是十分通俗易懂的).markdown
而後把文章通篇看了一遍,這一篇看下來仍是蠻多屬性的,可能會一邊看一邊敲.網絡
看完可能再大概實踐一下,基本就完事了app

在這種狀況下,若是不是工做中會常用,隔了一段時間以後,又會忘得一乾二淨,也沒有通過深層次的思考和記憶,下次看可能又要從新看,從新理解一邊,有不少相似這樣的知識,看了就自我感受懂了,而後又丟一邊,如此反覆,須要的知識太多.老是感受學也學不完. 編輯器

學習要按照大腦的思惟方式

你們回想一下,不少成功人士的講座,總會講一堆有趣的故事,而後把結論告訴你,又如奇葩說(不知道你們有沒有看過,一個辯論類的綜藝節目),老是利用一個個例子去說明觀點的正確,而不是直接把觀點拋給你,而是須要一步步引導你,讓你以爲這個觀點這個結論是正確的,因此學習一個很重要的就是例子!工具

這個是人教版的初中物理課本,講牛頓第必定律,看到了嗎,就像課本同樣,讓你學習一個新的東西是先給你一些生動例子,和生活中熟悉的事物聯繫起來,而後調動你的好奇心和求知慾,而不是一上來就告訴你結論.

可是網絡上不少編程的文檔,不少技術貼,都是直接告訴你,你須要怎麼作,有多少個屬性,使用會有什麼效果.固然,這樣並無問題,人家原本就不是老師,也不要顧及每一個人的學習,只是出於分享知識,總結一下,再附上幾個例子就行了.

更好的學習方法

這裏用到學習Grid網格佈局來舉例子

1.咱們首先上百度或者google搜索一下,這裏就用百度吧,搜索一下 Grid佈局實例

對!這裏沒弄錯,咱們不是直接去搜索Grid佈局有什麼屬性,先繞過去,去搜索Grid的實例,實例就像故事同樣比結論來的生動有趣!

2.點擊第一個打開看看,附上連接快速使用CSS Grid佈局，實現響應式設計

重點來了!!!

3.不要仔細看文字,直接找到代碼部分,複製到編輯器中打開,仔細看看代碼,咱們要用已學的舊知識去推斷去分析(重點:推斷和分析)

.wrapper {
            display: grid;
        }
 


    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
複製代碼

這段代碼,很明顯,你沒學過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;
}

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>
複製代碼

變成了這樣的.重複以前的步驟,先分析這裏又新增了兩個屬性 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次複習,就能很長時間的記在你腦海裏了,而且隨着熟悉程度愈來愈高,複習也愈來愈快