整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          小白如何快速入門JavaScript?6分鐘帶你看懂快速學習的六大步驟


          avaScript(通??s寫為JS)是一種解釋型、面向對象、多范式的高級編程語言。它被世界上的絕大多數網站所使用,也被世界主流瀏覽器(Chrome、IE、Firefox、Safari、Opera)支持。


          JavaScript是世界上最流行的腳本語言,因為它很容易上手,而且學習到它的精髓之后還可以編寫高質量的代碼,這就是我推薦給初學者學習的主要原因。今天就帶大家來學習JavaScript。這是當年我學習JavaScript的六大步驟,希望對你也有幫助:





          1.學習JavaScript基礎語法:


          古人常道:“萬丈高樓平地起”,意思大概是再高的大廈都要從平地開始修建,學習JavaScript也是一樣,想要學好它就一定要把基礎先打牢,學習JS的第一步是JavaScript基礎語法。


          首先,你要了解async和defer之間的區別,然后,深入學習代碼語法知識,例如變量,數據類型,循環和條件語句,函數,匿名函數,閉包,陣列和關聯陣列,事件,正則表達式,promises。


          注意語法順序一定要準確!上述舉例如果有遺漏的,大家可以在評論區留言。此外,我個人推薦你學習如何使用Chrome DevTools調試,因為Chrome DevTool是遠程調試JS最好的工具。





          2.學習面向對象編程:


          當你具備一定的JavaScript基礎語法后,你應該轉向學習面向對象編程(OOPs)。OOPs是JS和其他編程語言中最重要的概念。JS中的OOPs是基于原型繼承鏈上運行的,不像Java或C++是基于對象或類繼承。


          然而,關于元數據,你可以在學習了OOPs之后再轉到學習元數據編程。雖然元數據很好學,但它并不是JS中最重要的部分。我相信,你可不會喜歡JS帶來的意外“驚喜”。





          3.學習測試QA:


          測試代碼和調試JS一樣重要!你可能聽說過TDD(測試驅動開發)或BDD(行為驅動開發)這樣的詞,但到底是什么意思呢?簡而言之,TDD是指寫一個未通過的測試用例,然后讓測試通過,最后重構。


          而BDD則是根據業務,編寫具體的例子和自動化的測試,通過探索,發現,定義,最后推出軟件所需的行為。BDD和TDD之間沒有本質的區別。把它們組合在一起的是,它們都需要一群人,指定軟件在執行之前應該如何協同行動。





          4.學習jQuery:


          jQuery是一套跨瀏覽器的JavaScript庫,它的特點是動態性和互動性。它使用起來十分方便,就jquery本身而言,你經常會遇到如何將AJAX與jQuery整合的問題。AJAX是什么?舉個例子來說吧,


          「當你在百度瀏覽器中輸入一個關鍵詞,不用刷新便可得到關于詞條的一些內容,這就是AJAX」


          AJAX是Asynchronous JS and XML的縮寫,它主要處理的是與HTML和CSS不同步的請求而產生的問題。





          5.學習框架


          現在,你已經了解了jQuery,JS基礎語法,AJAX,Chrome DevTools,測試QA。以下的是你們現在真正應該學習的內容——框架:


          React:


          React的前身是React.JS。React最初是由Facebook和少數個人以及一個小社區開發的,但隨著時間的推移,React進行了多次的優化,現在它變成了很有意思而且功能很強大的代碼,也很容易學習。我個人是十分推薦你學習React的。日后,你可以用React以組件的形式在網頁中開發用戶界面。


          Angular:


          Angular在某方面和React非常相似,不過你可以用Angular以組件的形式編寫SPA。它是現在IT行業前端開發方面需求量最大的語言。Angular其實是JS框架,基本上意味著它是用JS編寫的。


          你可以在每個瀏覽器的各個角落遇見JS,這也側面證實了JS功能十分強大,也十分有用。我強烈建議你既要學習React,也要學習Angular。


          Node.JS:


          Node.JS是在服務器端編寫JS的框架。用Node.JS寫的代碼或API的速度快得離譜,而且Node.JS還可以同時處理多個請求。不像其他后端語言,很少有公司在Node.JS上實現了他們的服務器。


          它是服務器端語言的未來,在Node中實現的大型Web應用程序的可擴展性和部署方面存在一些問題,所以現在我不會稱它為服務器端語言的主角。


          Express.JS:


          和上文所述的框架一致,它也是一個功能強大的框架。Express.JS簡稱Express,它是針對Node.JS的web應用框架,在MIT許可證下作為自由及開放源代碼軟件發行。它被設計來建造web應用和API。


          同樣它也是由用JS編寫的,我個人建議如果你在學習Node.JS,那么一定要把Express.JS也掌握好。





          6.學習庫


          框架學習也結束了,下面正是學習JavaScript之路上至關重要的最后一點。學習一段時間后,你可能絞盡腦汁想寫好代碼,而且明明思路很清晰,卻只能寫出一點點代碼。這時候你就該使用這個庫了,我并沒有推廣庫的想法,而是真心希望你可以擁有非常有趣的學習和使用經歷。


          Coffee.Script:


          Coffee.Script與JS功能類似,但它有一個好處就是沒有分號,括號,雙引號,甚至是大括號的雜亂和麻煩。當你學習了JS的基礎語法,搭建完眾多框架,再學習coffee.script,你就會意識到它有多么的很簡單。正因為它十分容易編寫,所以我真的很推薦你們進行學習。


          當你開始學習時也可以使用JS文檔訪問JavaScript,并且不要害怕一路上承擔一些項目。完全不需要擔心,項目會給你帶來的挑戰,項目的一次次完成會帶給你不一樣的新鮮感和信心,只有突破重圍才會看到嶄新的自己。記住明天的你會感激現在拼命的自己,當你精通JS之時,任何挑戰都沒有辦法限制你學習。



          如果你對這篇文章有任何感悟或想法,可以在評論區留言。我個人對編碼充滿了激情,我認為每個人都應該學習它,而不是敬而遠之。衷心地祝原你在編碼的路上越走越穩,越走越快,越走越遠。到那時你雖已是碼農,但你仍要牢記學習,從中得到啟發,并走向更美好的明天。

          全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。

          主要內容:正式引入HTML網頁開發,學習并了解HTML的相關知識。變身Web開發達人,做全棧程序員。這是以第一課,希望以我的方式,你將學會HTML這門課程。


          寫在前面

          今天的話,主要講解一下HTML相關知識,同樣在接下來的一段時間的安排中,也以HTML為主。崇尚全棧,也就意味著我們,需要學習主流的技術知識。在前一段時間內,主要講解了.Net的只是教程。當然.NET并沒有完畢。

          C#語言

          只是在這里把HTML穿插進來,一則鞏固自己所得,二來學習一下這門非常簡單的HTML技術。學習完畢HTML之后則會,繼續進行基礎加強、數據庫、MVC等教程的協作工作。

          PDF文檔

          同時在前一個階段內,講解的并不是很好,在這個HTML階段內,則會吸取教訓,爭取寫出更符合初學者學習的技術教程。當然前面的課程也會不斷的修正,最后我會生成PDF的文檔,發給大家。


          HTML概述

          HTML概述

          HTML,超文本標記語言,超文本就意味著有多于文字的形式,比如包含超鏈接、圖片、視頻、動畫等形式。HTML是應用在網站網頁展現的一種語法結構。我們在使用瀏覽器瀏覽網頁的時候,看到的界面都是由HTML代碼表現出來的。HMTL可以說是一種展示文字圖片視頻等元素的一種方式。通過特定的標記就能展示出來自己想要的效果。如何展現?就讓我一步步教你。


          學習HTML的必要性

          物聯網

          互聯網的飛速發展,導致了形形色色的網站應用被創建。云計算、物聯網仿佛唾手可得。把諸多應用建立在云上,通過這種瀏覽器與用戶交互的形式讓人們使用。這些所有網絡應用,只要是通過瀏覽器進行使用的情況,都是需要HTML技術。當然HTML作為基礎之用。這就要求我們程序員,必須學習并熟悉HTML語言。能在這個基礎上進行Web的開發。


          HTML語言的特點

          1. HTML是解釋性語言,不需編譯,直接書寫之后,就可以運行。

          2. HTML是純文本類型的語言,你完全可以通過記事本程序進行創建書寫。

          3. 雖然HTML可以通過記事本來創建寫代碼,但是并不推薦,因為以前學習過.Net,所以依舊使用Visual Studio。VS也是前端的開發神器。

          4. 自己寫的HTML代碼,在不同的瀏覽器內,可能會有不同的展示效果。這是由瀏覽器的渲染引擎決定的。

          5. HTML具有平臺無關性,在任何平臺只要擁有一款瀏覽器,你就可以打開HTML網頁。

          6. HTML代碼運行在瀏覽器中,也就是需要使用瀏覽器進行測試。

          HTML


          今天就先說一下HTML的基本知識,電腦編程系列教程,下節繼續。

          多人想讓我給他們推薦有關CSS部分的教程,或者問我如何學習CSS。我也看到很多人對CSS的部分內容感到困惑,一部分原因是由于對語言的過時認識。鑒于CSS在過去幾年中發生了相當大的變化,這是一個更新知識的好時機。即使CSS只是你所做工作的一小部分(因為你使用其他技術棧),CSS是你最終希望在屏幕上顯示的結果,所以值得合理去學習。

          因此,本文旨在概述CSS的關鍵基礎和資源,以便進一步閱讀現代CSS開發的關鍵領域。其中許多資源在Smashing雜志上已經有了,但我也選擇了其他一些資源,也有人關注CSS的關鍵領域。這不是一本完整的初學者指南或旨在涵蓋所有知識點。我的目標是覆蓋現代CSS的廣度,同時重點關注幾個關鍵領域,將幫助你理解CSS的其他部分。

          語言基礎知識

          對于CSS的大部分內容,你不需要特意去學習屬性和值,你可以在需要時查找它們。然而,CSS中一些基礎知識沒有掌握好,你將很難去理解它。這些基礎知識值得你花時間去理解,從長遠看,它會幫你節省很多時間和少走彎路。

          選擇器,不僅僅有類

          選擇器的表現如標題所說的,它選擇文檔的某些部分,以便你可以將CSS規則應用于它。大多數人都熟悉使用 class,或在 直接使用HTML元素設置樣式,比如 body,但是還有很多更高級的選擇器可以根據文檔中的位置選擇元素,直接選擇位于元素之后的元素,或選擇表格中的奇數行。

          這些選擇器是CSS3規范的一部分(你可能聽說過它們被稱為第3級選擇器)具有出色的瀏覽器支持。有關可以使用的各種選擇器的詳細信息,請參閱 MDN 參考。

          有些選擇器的行為就好像你已經將類應用于文檔中的某些內容。例如p:first-child就像你在第一個p元素中添加了一個類一樣,這些被稱為 偽類選擇器。偽元素選擇器就像動態插入一個元素一樣,例如::first-line的表現與用span 包裹第一行文本類似。但是,如果該行的長度發生變化,它將重新應用,如果插入該元素則不會出現這種情況。這些選擇器可能會相當復雜。在下面的CodePen中是一個用偽類鏈接的偽元素的例子。我們使用:first-child偽類定位第一個p元素,然后::first-line選擇器選擇該元素的第一行,就好像在第一行周圍添加了一個<span>以使其變為粗體和改變顏色。

          <div class="container">
            <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p></div>
          body {
            padding: 20px;
            font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}* {box-sizing: border-box;}
          
          p {
            margin: 0 0 1em 0;}.container {
            border: 5px solid rgb(111,41,97);
            border-radius: .5em;
            padding: 10px;
            column-count: 2;}.container p:first-child::first-line {
            font-weight: bold;
            color: rgb(111,41,97);}

          繼承和層疊

          層疊是指當元素應用了多個樣式規則,哪個規則優先應用。如果你曾經遇到過無法理解為什么某些CSS似乎沒有應用的情況,那可能是層疊沒有運用好。層疊與繼承緊密相關,繼承定義了子元素可以繼承父元素的樣式屬性。它還與特異性有關,不同的選擇器具有不同的特異性,當有幾個選擇器可以應用于一個元素時,繼承可以決定應用哪個規則。

          注意:為了理解所有這些內容,我建議閱讀MDN CSS簡介中的 層疊和繼承。

          如果你正在嘗試將一些CSS應用于一個元素,那么你的瀏覽器開發者工具是開始最好的地方??纯聪旅娴睦樱矣迷剡x擇器 h1 將 h1 標題設置為橙色。同時,我也使用類選擇器設置h1 設置為紫色。由于類更具體,因此h1是紫色的。在開發者工具中,您可以看到元素選擇器被劃掉,因為它沒有被應用。一旦你看到瀏覽器正在獲取你的CSS(但其他東西已經推翻了它),那么你可以開始找出原因。

          <div class="container">
            <h1 class="veggies">I like veggies</h1>
            <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p></div>
          body {
            padding: 20px;
            font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}* {box-sizing: border-box;}
          
          p {
            margin: 0 0 1em 0;}.container {
            border: 5px solid rgb(111,41,97);
            border-radius: .5em;
            padding: 10px;}.veggies {
            color: rebeccapurple;}
          
          h1 {
            color: orange;}


          盒模型

          CSS里一切都是盒子。屏幕上顯示的所有內容都有一個框,盒模型描述了如何計算該框的大小 - 將外邊距,內邊距和邊框考慮進去。標準的CSS框模型接受給定元素的寬度,然后將內邊框和邊框添加到該寬度上——這意味著元素占用的空間大于給定的寬度。

          最近,我們已經能夠選擇使用IE盒模型,使得元素上的給定寬度作為屏幕上可見元素的寬度。任何內邊距或邊框都會從邊緣插入框的內容。這對許多布局更有意義。

          在下面的演示中,我有兩個盒子。兩者的寬度均為200像素,邊框為5像素,內邊距為20像素。第一個框使用標準框模型,因此占用總寬度為250像素,第二個框使用IE盒模型,因此實際上是200像素寬。

          <div class="box">
            I use the standard box model.
            </div><div class="box box2">
            I use the alternate box model.
            </div>
          body {
            padding: 20px;
            font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}
          
          p {
            margin: 0 0 1em 0;}.box {
            border: 5px solid rgb(111,41,97);
            border-radius: .5em;
            padding: 20px;
            width: 200px;
            margin-bottom: 2em;}.box2 {
            box-sizing: border-box;}

          瀏覽器開發者工具可以再次幫助你了解正在使用的盒子模型。在下圖中,我使用火狐瀏覽器的開發者工具使用默認的內容框框模型檢查框。工具告訴我這是正在使用的盒模型,我可以看到大小以及如何將邊框和內邊框添加到指定的寬度。

          注意:在IE6之前,Internet Explorer使用IE盒模型,內邊框和邊框插入給定寬度的內容里。所以有一段時間瀏覽器使用不同的盒模型!如果今天的互操作性問題感到沮喪,現在已經有所改善,那么我們就不會處理瀏覽器以不同的方式計算元素的寬度。

          在 CSS Tricks 里,有關于盒模型和盒子尺寸的很好的解釋,并解釋了在你的網站中全局使用IE盒模型的最佳方法。

          標準流

          如果你的文檔內容用一些HTML標記,你的文檔將具有可讀性。標題和段落會另起新的一行,單詞組成句子時,它們之間有一個空格。標記是用來格式化的,像 em 不會破壞句子的流。句子會表現標準流,或塊流布局。句子的每個部分都被描述為“在流中”,它知道句子其余內容,所以不會重疊。

          如果你去了解,而不是去反對這種行為,你會變得更加輕松。這是為什么從正確標記的HTML文檔開始很有意義的原因之一,由于瀏覽器遵守正常流和內置樣式表,你的內容從可讀的地方開始。

          格式化上下文


          一旦文檔的內容處于正常流程中,您可能希望更改其中一些內容的外觀。你可以通過更改元素的格式上下文來完成此操作。舉個一個非常簡單的示例,如果你希望所有段落連在一起而不是從新行開始,你可以設置 p 元素的樣式屬性display:inline ,將 p 元素由塊級元素變成內聯元素。

          本質上,格式化上下文定義了外部和內部類型。外部控制元素與頁面上其他元素的行為,內部控制子元素的外觀。例如,當你設置 display:flex ,你在設置外部為塊格式化上下文,設置子元素為 flex 格式化上下文。

          注意:最新版本的Display規范改變了 display 的值,顯式聲明外部和內部的類型。因此,將你可能會聲明 display:block flex; (外部為 block,內部為 flex)


          進入或離開流

          CSS中的元素被描述為“在流中”或“脫離流”。流中的元素被賦予空間,并且空間被流中的其他元素所影響。如果通過浮動或定位元素使元素脫離流,則該元素的空間將不再受到其他流元素的影響。

          對于絕對定位的元素,是最明顯的。如果你設置一個元素 position: absolute ,該元素會從流中脫離,你需要確保這個元素不會與流中的元素重疊,且不影響你布局的其他部分的可讀性。

          <div class="container">
            <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
            <div class="item">
          body {
            padding: 20px;
            font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}* {box-sizing: border-box;}
          
          p {
            margin: 0 0 1em 0;}.container {
            border: 5px solid rgb(111,41,97);
            border-radius: .5em;
            padding: 10px;
            column-count: 2;
            max-width: 400px;
            position: relative;}.item {
            border-radius:.5em;
            position: absolute;
            top: 10px;
            left: 20px;
            background-color: rgba(111,41,97,.9);
            color: #fff;
            padding: 20px;
            width: 200px;}

          然而,浮動元素也會從流中脫離,但后面的元素的文本將環繞該浮動元素。你可以設置后面元素的背景顏色,你會看到他們會上升并占用了原來浮動元素原來的空間。

          <div class="container">
            <div class="item">
              I am floated and out of flow.
            </div>
            <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p></div>
          body {
            padding: 20px;
            font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;}* {box-sizing: border-box;}
          
          p {
            margin: 0 0 1em 0;}.container {
            border: 5px solid rgb(111,41,97);
            border-radius: .5em;
            padding: 10px;
            max-width: 500px;}.item {
            border-radius:.5em;
            float: left;
            background-color: rgba(111,41,97,.9);
            color: #fff;
            padding: 20px;
            width: 100px;
            margin: 10px;}.container p:nth-of-type(1) {
            background-color: yellow;}

          你可以在MDN上閱讀更多有關 流中和脫離流 的信息。需要記住的重要一點是,如果從流中取出一個元素,則需要自己管理重疊,因為塊流布局的常規規則不再適用。

          布局

          十五年來,我們一直使用CSS布局,但沒有設計一套布局系統。這已經改變了。我們現在擁有功能完備的布局系統,其中包括 Grid 和 Flexbox ,還有多列布局和舊布局方法也應用于實際目的。

          不要認為grid和flexbox等方法在某種程度上是競爭的。為了更好地使用布局,你有時會發現組件最好作為 flex ,有時作為 Grid。有時,你想要多列流動布局。所有這些都是不錯的選擇。如果你覺得自己在與某些事物的行為方式作斗爭,這通常是一個非常好的跡象,表明它可能值得退一步,嘗試一種不同的方法。我們已經習慣了在CSS上做一些我們想做的事情,以至于我們可能會忘記我們還有很多其他的選擇可以嘗試。

          對齊

          通常,我會將對齊和布局分開,雖然大多數人把對齊當作 Flexbox的一部分。對齊這些屬性適用于所有布局方法上,應該在上下文去理解對齊,而不是考慮 “Flexbox對齊”或“CSSGrid 對齊”。對齊屬性在大體上表現一樣,但不同布局方式里會有一些差異。

          在MDN上,您可以深入了解 盒對齊 及其在Grid,Flexbox,多列和塊布局中的實現方式。

          尺寸

          我在2018年花了很多時間討論了內部和外部尺寸規范,特別是它與Grid和Flexbox的關系。在web上,我們習慣于設置尺寸為長度或百分比,這就是我們如何使用浮動來制作網格類型布局的方法。然而,現代的布局方法可以為我們做很多空間分配——如果我們允許的話。值得花時間去了解Flexbox如何分配空間(或Grid fr 單元如何工作)。

          響應式設計

          通常,新的Grid和Flexbox布局方法意味著我們可以使用比舊方法更少的媒體查詢,因為它們非常靈活,可以響應視口或組件大小的變化,而無需我們更改元素的寬度。但是,有些地方需要添加一些斷點來進一步增強設計。

          字體和排版

          與布局一樣,網絡上的字體使用在去年發生了巨大的變化?,F在,可變字體,使單個字體文件具有無限的變化。要了解它們是什么以及它們如何工作,請觀看Mandy Michael的精彩簡短演講:可變字體和網頁設計的未來。另外,我會推薦Jason Pamental的動態排版與現代CSS和可變字體。

          為了探索可變字體和它們的功能,微軟提供了一個有趣的演示,以及一些嘗試可變字體的游樂場 - Axis Praxis是最知名的(我也喜歡字體游樂場)。

          MDN上的指南將證明一開始使用可變字體是非常有用的。

          變形和動畫

          CSS轉換和動畫絕對是我需要知道的基礎。我不經常需要使用它們,在使用時會忘記語法。值得慶幸的是,MDN上的參考資料幫助了我,我建議從使用CSS變換和使用CSS動畫的指南開始。Zell Liew也有一篇很好的文章,為CSS過渡提供了很好的解釋。

          關于動畫可能令人困惑的事情之一是采取哪種方法。除了CSS支持的內容之外,你可能還需要涉及JavaScript,SVG或Web Animation API,而這些事情往往都會被混為一談。在她的演講中,選擇你的動畫冒險記錄在事件中,Val Head解釋了這些選項。

          使用速查表作為回憶,而不是學習工具

          當我提到Grid或Flexbox資源時,我經??吹交貜驼f,如果沒有特定的速查表,他們就不能使用Flexbox。我覺得把速查表作為記憶助手查找語法沒有問題,我自己也出版過一些速查表。完全依賴速查表的問題是當你復制語法時,你可能會忽略為什么要這樣寫。然后,當你遇到屬性的行為似乎不同的情況時,這種明顯的不一致性似乎令人困惑,或者是語言的錯誤 。

          如果你發現CSS在做一些非常奇怪的事情的情況下,問問為什么。創建一個簡單的測試用例來強調這個問題,問問對規范更熟悉的人。我被問到的許多CSS問題都是因為人們認為屬性的表現與它在現實中的表現不同。這就是為什么我經常討論關于對齊和尺寸,因為這些地方經常會混淆。

          多年開發老碼農福利贈送:網頁制作,網站開發,web前端開發,從最零基礎開始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移動端小程序項目實戰【視頻+工具+電子書+系統路線圖】都有整理,需要的伙伴可以私信我,發送“前端”等3秒后就可以獲取領取地址,送給每一位對編程感興趣的小伙伴

          是的,CSS中有一些奇怪的東西。它是一門經過多年進化的語言,有些東西我們無法改變,除非我們發明了時間機器。然而,一旦你掌握了一些基礎知識,并且理解了為什么會這樣,你就可以更輕松地處理棘手的問題。


          主站蜘蛛池模板: 国产成人精品无人区一区| 怡红院一区二区三区| 精品亚洲AV无码一区二区三区| 亚洲丰满熟女一区二区哦| 久久亚洲中文字幕精品一区| 亚洲AV日韩综合一区尤物| 日韩精品人妻一区二区中文八零 | 69久久精品无码一区二区| 国产一区二区三区高清在线观看 | 国产一区二区精品久久岳√| 亚洲一区精品视频在线| 久久精品免费一区二区三区| 国产激情精品一区二区三区| 一区二区免费国产在线观看| 精品国产一区二区三区免费看| 日韩一区二区视频| 亚洲国产精品无码第一区二区三区| 精品无码人妻一区二区免费蜜桃| 无码精品视频一区二区三区| 国产成人精品一区二区三区免费| 亚洲中文字幕无码一区二区三区| 国产亚洲一区二区三区在线不卡| 一区二区三区电影在线观看| 一区二区免费电影| 久久精品无码一区二区日韩AV| 无码人妻久久一区二区三区蜜桃| 一区二区在线免费视频| 不卡一区二区在线| 中文字幕在线一区二区在线| 亚洲第一区视频在线观看| 精品国产福利一区二区| 欧美激情一区二区三区成人| 亚洲AV无码一区二区三区鸳鸯影院 | 国产主播福利精品一区二区| 国产精品综合一区二区| 精品一区二区三区无码视频| 国产精品第一区第27页| 久久精品一区二区国产| 狠狠做深爱婷婷综合一区 | 国模精品一区二区三区视频| 美女免费视频一区二区三区|