web前端開發(fā)初學(xué)者如何科學(xué)的快速學(xué)會CSS？
很多前端初學(xué)者對 CSS 表示很頭大，咨詢w3cschool小獅妹”如何學(xué)習(xí) CSS?“?？偨Y(jié)發(fā)現(xiàn)一部分原因是由于我們對 CSS 沒有很好的認(rèn)識。雖然 CSS 只是前端工作的一小部分，但是它直接關(guān)系到網(wǎng)頁最終顯示效果，很值得我們?nèi)W(xué)習(xí)。
本文主要概述 CSS 的一些常見基礎(chǔ)知識，幫助大家更好的理解 CSS 。
什么是 CSS？
CSS（層疊樣式表）——英文 Cascading Style Sheets 的縮寫，是一種計算機標(biāo)記語言，用來表現(xiàn)?HTML?（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或?XML?（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式。
CSS 知識點太多記不??？
CSS 知識點確實很多，我們只需要學(xué)習(xí)并理解它的基礎(chǔ)知識和原理，需要用到的時候再到w3cschool?查詢CSS參考手冊?，不需要學(xué)習(xí)完所有的屬性和值，但是學(xué)習(xí) CSS 要有一些前端基礎(chǔ)，如果沒有這些基礎(chǔ)，您將很難理解它，你可以先在W3Cschool上學(xué)習(xí)HTML?。 這樣可以節(jié)省大量時間、少走很多彎路。
認(rèn)識選擇器（SELECTORS）
HTML 頁面中的元素是通過?CSS 選擇器?來進行控制的，可以實現(xiàn)一對一，一對多或者多對一的控制，學(xué)習(xí) CSS 首先要掌握的就是選擇器。一般使用?class 選擇器（程序中稱“類選擇器”），或直接在?body?中使用?HTML 元素(elements)?（指的是從開始標(biāo)簽(start tag)到結(jié)束標(biāo)簽(end tag)的所有代碼。）來設(shè)置樣式(Style)，但是一些更復(fù)雜的操作就需要更高級的選擇器來實現(xiàn)了，如一些對象直接位于元素之后，或者是要選擇表格中的奇數(shù)行，就需要根據(jù)元素在文檔中的位置來選擇元素。
這些選擇器屬于?CSS3?規(guī)范的一部分（你可能聽說過它們被稱為 CSS3 選擇器）具有出色的瀏覽器支持。 有關(guān)可以使用的各種選擇器的詳細信息，請參閱W3Cschool的?CSS 選擇器?。
有些選擇器的行為就好像你已經(jīng)將“類”（?class） 應(yīng)用于文檔中的某些內(nèi)容一樣。 例如p:first-child就像你在第一個p元素中添加了一個“類”一樣，這些被稱為“偽對象選擇符”(Pseudo-Element?Selectors)。 “偽對象選擇符”的作用類似于動態(tài)插入元素，例如::first-line的作用與用span?包裹第一行文本類似。但是，如果該行的長度發(fā)生變化，它將重新應(yīng)用，如果插入該元素，就不會出現(xiàn)這種情況。 現(xiàn)在你可能會覺得這些選擇器很復(fù)雜， 下面示例中是一個用偽類(Pseudo-class?)?的偽元素(Pseudo Element)?例子。 我們使用?:first-child?偽類定位第一個?p?元素，然后?::first-line?選擇器選擇該元素的第一行，就好像在第一行周圍添加了一個<span>以使其變粗并更改顏色一樣。
HTML代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>認(rèn)識CSS選擇器（SELECTORS）- 編程獅(w3cschool.cn)</title> <style type="text/css"> @import url("style/style.css"); </style> </head> <body> <div class="container"> ? ? <p>大學(xué)之道，在明明德，在親民，在止于至善。</p> ? ? <p>知止而后有定，定而后能靜，靜而后能安，安而后能慮，慮而后能得。物有本末，事有終始。知所先后，則近道矣。</p> ? ? <p>古之欲明明德于天下者，先治其國；欲治其國者，先齊其家；欲齊其家者，先修其身；欲修其身者，先正其心；欲正其心者，先誠其意；欲誠其意者，先致其知。致知在格物。物格而后知至，知至而后意誠，意誠而后心正，心正而后身修，身修而后家齊，家齊而后國治，國治而后天下平。自天子以至于庶人，壹是皆以修身為本。</p> <p>其本亂而末治者，否矣。其所厚者薄，而其所薄者厚，未之有也。</p> </div> </body> </html>
CSS代碼：
body { ? padding: 20px; ? font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif; ? background-color: wheat; } * {box-sizing: border-box;} p { ? margin: 0 0 1.7em 0; } .container { ? ? border: 1px solid rgb(254,106,0); ? border-radius: .5em; ? padding: 20px; ? column-count: 1; } .container p:first-child::first-line { ? font-weight: bold; ? color: rgb(254,106,0); }
效果：
繼承和層疊（INHERITANCE AND THE CASCADE）
層疊定義了一個元素應(yīng)用了多個樣式規(guī)則時，應(yīng)該哪個規(guī)則優(yōu)先應(yīng)用。 如果你無法理解為什么某些 CSS 似乎沒有應(yīng)用的情況，那可能是層疊沒有運用好。 層疊與繼承緊密相關(guān)，繼承定義了子元素可以繼承父元素的樣式屬性。 它還與特異性有關(guān)，不同的選擇器具有不同的特異性，當(dāng)有幾個選擇器可以應(yīng)用于一個元素時，繼承可以決定應(yīng)用哪個規(guī)則。
注意：為了理解這些內(nèi)容，建議閱讀 W3Cschool 中的?CSS 樣式級聯(lián)。
如果你正在嘗試將一些 CSS 應(yīng)用于一個元素，那么你的瀏覽器開發(fā)者工具（DevTools）是最好的選擇?？纯聪旅孢@個例子，我用元素選擇器?h1?將?h1?標(biāo)題設(shè)置為橙色。同時，我也使用類選擇器將h1?標(biāo)題設(shè)置為紫色。 由于類的優(yōu)先級更高，因此h1標(biāo)題是紫色的。 在開發(fā)者工具中，您可以看到元素選擇器被劃掉了，因為它沒有被應(yīng)用。 一旦你看到瀏覽器正在獲取你的 CSS（但其他東西已經(jīng)推翻了它），那么你可以開始找出原因了。
HTML代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>繼承和層疊 - 編程獅(w3cschool.cn)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> ? ? <h1 class="greatlearning">大學(xué)</h1> ? ? <p>大學(xué)之道，在明明德，在親民，在止于至善。</p> ? ? <p>知止而后有定，定而后能靜，靜而后能安，安而后能慮，慮而后能得。物有本末，事有終始。知所先后，則近道矣。</p> ? ? <p>古之欲明明德于天下者，先治其國；欲治其國者，先齊其家；欲齊其家者，先修其身；欲修其身者，先正其心；欲正其心者，先誠其意；欲誠其意者，先致其知。致知在格物。物格而后知至，知至而后意誠，意誠而后心正，心正而后身修，身修而后家齊，家齊而后國治，國治而后天下平。自天子以至于庶人，壹是皆以修身為本。</p> <p>其本亂而末治者，否矣。其所厚者薄，而其所薄者厚，未之有也。</p> </div> </body> </html>
CSS代碼：
body { ? padding: 20px; ? font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif; ? background-color: wheat; } * {box-sizing: border-box;} p { ? margin: 0 0 1.7em 0; } .container { ? ? border: 1px solid rgb(254,106,0); ? border-radius: .5em; ? padding: 20px; ? column-count: 1; } .greatlearning { ? color: rebeccapurple; } h1 { ? color: orange; }
效果：
盒模型（Box Model ）
css將html元素看作一個個盒子，來設(shè)計和布局。盒子有它們的屬性，盒子之間也可嵌套。標(biāo)準(zhǔn)的 CSS 盒模型 (CSS Box Model) 采用你給定元素的寬度，然后將內(nèi)邊框和邊框添加到該寬度上——這意味著元素占用的空間大于給定的寬度。
屬性：margin、padding、border、content
根據(jù)display屬性值的不同，如，block\\\\inline-block\\\\inline（默認(rèn)），可設(shè)置為塊模型\\\\內(nèi)聯(lián)塊模型\\\\內(nèi)聯(lián)模型
分類：標(biāo)準(zhǔn)模型、IE模型（替代盒子模型）
除了標(biāo)準(zhǔn)盒子模型外還有一個盒子模型叫 IE 模型（替代盒子模型），盒子的寬度是頁面上可見框的寬度，因此內(nèi)容區(qū)域的寬度是該寬度減去填充和邊框的寬度。詳細請查閱W3Cschool上的CSS Box Model (盒子模型)?。
下面演示兩個盒子， 兩者的寬度均為200像素，邊框為1像素，內(nèi)邊距為20像素。 第一個框使用標(biāo)準(zhǔn)盒子模型，因此占用總寬度為 242 像素，第二個框使用替代盒子模型，因此實際上是 200 像素寬。
HTML代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS 盒模型 -編程獅(w3cschool.cn)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="box"> ? ? 我是標(biāo)準(zhǔn)盒子模型。 </div> <div class="box box2"> ? ? 我是替代盒子模型。 </div> </body> </html>
CSS代碼：
body { ? padding: 20px; ? font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif; ? background-color: wheat; } p { ? margin: 0 0 1em 0; } .box { ? ? border: 1px solid rgb(254,106,0); ? border-radius: .5em; ? padding: 20px; ? width: 200px; ? margin-bottom: 2em; } .box2 { ? box-sizing: border-box; }
效果：
瀏覽器開發(fā)者工具(DevTools)可以再次幫助你了解正在使用的盒子模型。 在下圖中，我使用火狐瀏覽器的開發(fā)者工具使用默認(rèn)的?content-box盒模型工具。 工具告訴我這是正在使用的盒模型，我可以看到大小以及如何將邊框和內(nèi)邊框添加到指定的寬度。
DevTools可幫助您了解為什么盒具有一定大小以及所使用的盒模型
注意：在 IE8 以前，如果想要兼容的話，就需要用 W3C 標(biāo)準(zhǔn)，聲明。在 IE8+ ，瀏覽器中使用哪個盒模型可以由 box-sizing 控制，默認(rèn)值為 content-box，即標(biāo)準(zhǔn)盒模型。
在 W3Cschool的?CSS Box Model?中，有關(guān)于盒模型、盒子尺寸詳細說明。
常規(guī)流（normal flow）
也有人翻譯為“文檔流”，具體叫什么名字不重要，我們理解它的原理就行了。標(biāo)題和段落將以新行開始，單詞顯示為句子，并且它們之間只有一個空格。用于格式化的標(biāo)簽（例如em）不會破壞句子流。此內(nèi)容以“常規(guī)流(normal flow)”或“塊流布局(Block Flow Layout)”顯示。內(nèi)容的每個部分都被描述為“在流中(in flow)”；它知道其余內(nèi)容，因此不會重疊。
我們要接受這種行為，學(xué)起來才會變得更加輕松。這是為什么從一個正確標(biāo)記的HTML文檔開始很有意義的原因之一，由于瀏覽器遵守常規(guī)流和內(nèi)置樣式表，你的內(nèi)容從可讀的地方開始。
格式化上下文（FORMATTING CONTEXTS）
一旦文檔的內(nèi)容處于正常流程中，您可能希望更改其中一些內(nèi)容的外觀。 你可以通過更改元素的格式上下文來完成此操作。 舉個一個非常簡單的示例，如果你希望所有段落連在一起而不是從新行開始，你可以設(shè)置?p?元素的樣式屬性display:inline?，將?p?元素由塊級元素變成內(nèi)聯(lián)元素。
本質(zhì)上，格式化上下文定義了外部和內(nèi)部類型。外部控制元素與頁面上其他元素的行為，內(nèi)部控制子元素的外觀。例如，當(dāng)你設(shè)置?display:flex?，你在設(shè)置外部為塊格式化上下文，設(shè)置子元素為 flex 格式化上下文。
注意：最新版本的 Display 規(guī)范改變了?
display?的值，顯式聲明外部和內(nèi)部的類型。因此，將你可能會聲明?display:block flex;?（外部為?block，內(nèi)部為?flex）。
在W3Cschool的?CSS display顯示?上閱讀更多關(guān)于?display的信息。
在流中或脫離流（BEING IN OR OUT OF FLOW）
CSS 中的元素被描述為“在流中(in flow)”或“脫離流(out of flow)”。流中的元素被賦予空間，并且空間被流中的其他元素所影響。 如果通過浮動或定位元素使元素脫離流，則該元素的空間將不再受到其他流元素的影響。
對于絕對定位的元素，是最明顯的。 如果你設(shè)置一個元素?position: absolute?，該元素會從流中脫離，你需要確保這個元素不會與流中的元素重疊，且不影響你布局的其他部分的可讀性。
HTML代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS flow - 編程獅(w3cschool.cn)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> ? ? ? ?<p>子曰：“學(xué)而時習(xí)之，不亦說乎？有朋自遠方來，不亦樂乎？人不知而不慍，不亦君子乎？</p> ? ? <p>有子曰:“其為人也孝弟而好犯上者，鮮矣；不好犯上而好作亂者，未之有也。君子務(wù)本，本立而道生。孝弟也者，其為仁之本與!”</p> ? ? <p>子曰:“巧言令色，鮮矣仁！”</p> ? ? <p>曾子曰“吾日三省吾身:為人謀而不忠乎?與朋友交而不信乎?傳不習(xí)乎?”</p> ? ? <p>子曰:“道千乘之國,敬事而信，節(jié)用而愛人，使民以時。”</p> ? ? <p>子曰：“弟子入則孝，出則弟，謹(jǐn)而信，泛愛眾，而親仁。行有余力，則以學(xué)文?！?lt;/p> ? ? <p>子夏曰：“賢賢易色；事父母，能竭其力；事君，能致其身；與朋友交，言而有信。雖曰未學(xué)，吾必謂之學(xué)矣?！?lt;/p> ? ? <p>子曰：“君子不重則不威，學(xué)則不固。主忠信，無友不如己者，過則勿憚改?！?lt;/p> ? ? <p>曾子曰：“慎終追遠，民德歸厚矣?！?lt;/p> ? ? <p>子禽問于子貢曰：“夫子至于是邦也，必聞其政，求之與，抑與之與？”子貢曰：“夫子溫、良、恭、儉、讓以得之。夫子之求之也，其諸異乎人之求之與？”</p> ? ? <p>子曰：“父在，觀其志。父沒，觀其行；三年無改于父之道，可謂孝矣。”</p> ? ? <p>有子曰：“禮之用，和為貴。先王之道，斯為美，小大由之。有所不行，知和而和，不以禮節(jié)之，亦不可行也。”</p> ? ? <p>有子曰：“信近于義，言可復(fù)也。恭近于禮，遠恥辱也。因不失其親，亦可宗也?！?lt;/p> ? ? <p>子曰：“君子食無求飽，居無求安，敏于事而慎于言，就有道而正焉?？芍^好學(xué)也已?！?lt;/p> ? ? <p>子貢曰：“貧而無諂，富而無驕，何如？”子曰：“可也。未若貧而樂，富而好禮者也?！弊迂曉唬骸啊对姟吩疲骸缜腥绱瑁缱寥缒ァ?，其斯之謂與？”子曰：“賜也，始可與言《詩》已矣，告諸往而知來者?！?lt;/p> ? ? <p>子曰：“不患人之不己知，患不知人也?！?lt;/p> ? ? ? ?<div class="item">絕對定位和脫離流。</div> </div> </body> </html>
CSS代碼：
body { ? padding: 20px; ? font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif; ? background-color: wheat; } * {box-sizing: border-box;} p { ? margin: 0 0 1em 0; } .container { ? ? border: 1px solid rgb(254,106,0); ? 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(254,106,0,.9); ? color: #fff; ? padding: 20px; ? width: 200px; }
效果：
然而，浮動元素也會從流中脫離，但后面的元素的文本將環(huán)繞該浮動元素。你可以設(shè)置后面元素的背景顏色，你會看到他們會上升并占用了原來浮動元素原來的空間。
HTML代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS flow - 編程獅(w3cschool.cn)</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> ? ? <div class="item">浮動和脫離流</div> ? ? ? <p>子曰：“學(xué)而時習(xí)之，不亦說乎？有朋自遠方來，不亦樂乎？人不知而不慍，不亦君子乎？</p> ? ? <p>有子曰:“其為人也孝弟而好犯上者，鮮矣；不好犯上而好作亂者，未之有也。君子務(wù)本，本立而道生。孝弟也者，其為仁之本與!”</p> ? ? <p>子曰:“巧言令色，鮮矣仁！”</p> ? ? <p>曾子曰“吾日三省吾身:為人謀而不忠乎?與朋友交而不信乎?傳不習(xí)乎?”</p> ? ? <p>子曰:“道千乘之國,敬事而信，節(jié)用而愛人，使民以時?！?lt;/p> ? ? <p>子曰：“弟子入則孝，出則弟，謹(jǐn)而信，泛愛眾，而親仁。行有余力，則以學(xué)文?！?lt;/p> ? ? <p>子夏曰：“賢賢易色；事父母，能竭其力；事君，能致其身；與朋友交，言而有信。雖曰未學(xué)，吾必謂之學(xué)矣?！?lt;/p> ? ? <p>子曰：“君子不重則不威，學(xué)則不固。主忠信，無友不如己者，過則勿憚改?！?lt;/p> ? ? <p>曾子曰：“慎終追遠，民德歸厚矣?！?lt;/p> ? ? <p>子禽問于子貢曰：“夫子至于是邦也，必聞其政，求之與，抑與之與？”子貢曰：“夫子溫、良、恭、儉、讓以得之。夫子之求之也，其諸異乎人之求之與？”</p> ? ? <p>子曰：“父在，觀其志。父沒，觀其行；三年無改于父之道，可謂孝矣?！?lt;/p> ? ? <p>有子曰：“禮之用，和為貴。先王之道，斯為美，小大由之。有所不行，知和而和，不以禮節(jié)之，亦不可行也。”</p> ? ? <p>有子曰：“信近于義，言可復(fù)也。恭近于禮，遠恥辱也。因不失其親，亦可宗也?！?lt;/p> ? ? <p>子曰：“君子食無求飽，居無求安，敏于事而慎于言，就有道而正焉。可謂好學(xué)也已。”</p> ? ? <p>子貢曰：“貧而無諂，富而無驕，何如？”子曰：“可也。未若貧而樂，富而好禮者也?！弊迂曉唬骸啊对姟吩疲骸缜腥绱瑁缱寥缒ァ?，其斯之謂與？”子曰：“賜也，始可與言《詩》已矣，告諸往而知來者?！?lt;/p> ? ? <p>子曰：“不患人之不己知，患不知人也。”</p> ? ?</div> </body> </html>
CSS代碼：
body { ? padding: 20px; ? font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif; ? background-color: wheat; } * {box-sizing: border-box;} p { ? margin: 0 0 1em 0; } .container { ? ? border: 1px solid rgb(254,106,0); ? border-radius: .5em; ? padding: 10px; ? max-width: 500px; } .item { ? border-radius:.5em; ? float: left; ? ?background-color: rgba(254,106,0,.9); ? color: #fff; ? padding: 20px; ? width: 100px; ? margin: 10px; } .container p:nth-of-type(1) { ? background-color: yellow; }
效果：
注意：?需要記住的重要一點是，如果從流中取出一個元素，則需要自己管理重疊，因為塊流布局的常規(guī)規(guī)則不再適用。
布局（Layout）
過去我們們在 HTML 中一般使用 CSS 進行布局，常見的布局有：單列布局、兩列自適應(yīng)布局、圣飛布局和雙飛翼布局、偽等高布局、粘連布局。重點介紹下 Flex 布局和 grid 布局：
Flex布局
Flex布局，也叫彈性盒子布局，區(qū)區(qū)簡單幾行代碼就可以實現(xiàn)各種頁面的的布局。
//html部分同上 .parent { ? ? display:flex; } ? .right { ? ? margin-left:20px; ? ? ?flex:1; }
推薦W3Cschool上的的Flexbox布局基礎(chǔ)入門?，可以更好的幫你掌握Flex。
grid布局
Grid 布局，是一個基于網(wǎng)格的二維布局系統(tǒng)，目的是用來優(yōu)化用戶界面設(shè)計。
//html部分同上 .parent { ? ? display:grid; ? ? grid-template-columns:auto 1fr; ? ? grid-gap:20px }
對齊（Alignment）
大多數(shù)人都會把對齊（Alignment）當(dāng)作 Flexbox 的一部分，但是這些屬性適用于所有布局方法值得在這種情況下理解它們，而不是考慮“ Flexbox Alignment”或“ Flexbox Alignment” “ CSS網(wǎng)格對齊?！?我們有一組Alignment屬性，它們在可能的情況下可以以一種通用的方式工作。然后，由于不同的布局方法的行為方式，它們會有一些差異。
尺寸（Sizing）
在 web 上，我們習(xí)慣用長度或百分比來設(shè)置尺寸，這就是我們?nèi)绾问褂酶觼碇谱骶W(wǎng)格類型布局的方法。然而，現(xiàn)代的布局方法可以為我們做很多空間分配——如果我們允許的話。值得花時間去了解 Flexbox 如何分配空間(或 Grid?fr?單元如何工作)。
響應(yīng)式設(shè)計（Responsive Design）
通常，新的 Grid 和 Flexbox 布局方法意味著我們可以使用比舊方法更少的媒體查詢，因為它們非常靈活，可以響應(yīng)視口或組件大小的變化，而無需我們更改元素的寬度。 但是，有些地方需要添加一些斷點來進一步增強設(shè)計。
字體和排版
與布局一樣，網(wǎng)絡(luò)上的字體使用在發(fā)生了巨大的變化?，F(xiàn)在，可變字體，使單個字體文件具有無限的變化。 要了解它們是什么以及它們?nèi)绾喂ぷ?，請觀看Mandy Michael的精彩簡短演講：可變字體和網(wǎng)頁設(shè)計的未來。 另外，我會推薦Jason Pamental的動態(tài)排版與現(xiàn)代CSS和可變字體。
為了探索可變字體和它們的功能，微軟提供了一個有趣的演示，以及一些嘗試可變字體的游樂場 -?Axis Praxis是最知名的（我也喜歡字體游樂場）。
MDN上的指南將證明一開始使用可變字體是非常有用的。要了解如何為不支持可變字體的瀏覽器實現(xiàn)回退解決方案，請閱讀 Oliver Schondorfer的《使用回退Web字體實現(xiàn)可變字體》Firefox DevTools字體編輯器還支持使用可變字體。
變形和動畫
CSS轉(zhuǎn)換和動畫絕對是我需要知道的基礎(chǔ)。 我不經(jīng)常需要使用它們，在使用時會忘記語法。 值得慶幸的是，MDN上的參考資料幫助了我，我建議從使用CSS變換和使用CSS3動畫的指南開始。?Zell Liew也有一篇很好的文章，為CSS過渡提供了很好的解釋。
要發(fā)現(xiàn)一些可能的事情，請查看Animista網(wǎng)站。
關(guān)于動畫可能令人困惑的事情之一是采取哪種方法。 除了 CSS 支持的內(nèi)容之外，你可能還需要涉及?JavaScript?，SVG?或 Web Animation API，而這些事情往往都會被混為一談。 在她的演講中，選擇你的動畫冒險記錄在事件中，Val Head解釋了這些選項。
使用參考手冊
在使用 Grid 或 Flexbox 很多人會很依賴w3cschool上的CSS參考手冊?，如果沒有參考手冊就沒法工作。這是沒有問題的，前面我們也提到可以合理的利用參考手冊來提升開發(fā)效率，但是前提是得先理解透原理。否則我們在復(fù)制語法時，可能會忽略為什么要這樣寫。然后，當(dāng)遇到該屬性似乎表現(xiàn)不同的情況時，這種明顯的不一致會令人困惑找不出問題出在哪。
CSS 是一門經(jīng)過多年進化的語言，一直在更新，如果是把自己當(dāng)成學(xué)習(xí)者的心態(tài)來學(xué)習(xí)的話，永遠也是學(xué)不完的。然而，一旦你把基礎(chǔ)知識及底層原理打牢了以后，你就可以很輕松的面對各種變化了。如果要系統(tǒng)的學(xué)習(xí)前端推薦學(xué)習(xí)W3Cschool上的從0基礎(chǔ)到前端開發(fā)?課程。
以上就是編程獅為你整理的關(guān)于web前端開發(fā)初學(xué)者如何科學(xué)的快速學(xué)會CSS？的全部內(nèi)容，希望給對css望而生畏初學(xué)者有所幫助，如果你有更好的學(xué)習(xí)方法歡迎分享~
