很多人想讓我給他們推薦有關(guān)CSS部分的教程，或者問(wèn)我如何學(xué)習(xí)CSS。 我也看到很多人對(duì)CSS的部分內(nèi)容感到困惑，一部分原因是由于對(duì)語(yǔ)言的過(guò)時(shí)認(rèn)識(shí)。 鑒于CSS在過(guò)去幾年中發(fā)生了相當(dāng)大的變化，這是一個(gè)更新知識(shí)的好時(shí)機(jī)。 即使CSS只是你所做工作的一小部分（因?yàn)槟闶褂闷渌夹g(shù)棧），CSS是你最終希望在屏幕上顯示的結(jié)果，所以值得合理去學(xué)習(xí)。

因此，本文旨在概述CSS的關(guān)鍵基礎(chǔ)和資源，以便進(jìn)一步閱讀現(xiàn)代CSS開(kāi)發(fā)的關(guān)鍵領(lǐng)域。 其中許多資源在Smashing雜志上已經(jīng)有了，但我也選擇了其他一些資源，也有人關(guān)注CSS的關(guān)鍵領(lǐng)域。 這不是一本完整的初學(xué)者指南或旨在涵蓋所有知識(shí)點(diǎn)。 我的目標(biāo)是覆蓋現(xiàn)代CSS的廣度，同時(shí)重點(diǎn)關(guān)注幾個(gè)關(guān)鍵領(lǐng)域，將幫助你理解CSS的其他部分。

語(yǔ)言基礎(chǔ)知識(shí)

對(duì)于CSS的大部分內(nèi)容，你不需要特意去學(xué)習(xí)屬性和值，你可以在需要時(shí)查找它們。 然而，CSS中一些基礎(chǔ)知識(shí)沒(méi)有掌握好，你將很難去理解它。 這些基礎(chǔ)知識(shí)值得你花時(shí)間去理解，從長(zhǎng)遠(yuǎn)看，它會(huì)幫你節(jié)省很多時(shí)間和少走彎路。

選擇器，不僅僅有類(lèi)

選擇器的表現(xiàn)如標(biāo)題所說(shuō)的，它選擇文檔的某些部分，以便你可以將CSS規(guī)則應(yīng)用于它。 大多數(shù)人都熟悉使用 class，或在 直接使用HTML元素設(shè)置樣式，比如 body，但是還有很多更高級(jí)的選擇器可以根據(jù)文檔中的位置選擇元素，直接選擇位于元素之后的元素，或選擇表格中的奇數(shù)行。

這些選擇器是CSS3規(guī)范的一部分（你可能聽(tīng)說(shuō)過(guò)它們被稱(chēng)為第3級(jí)選擇器）具有出色的瀏覽器支持。 有關(guān)可以使用的各種選擇器的詳細(xì)信息，請(qǐng)參閱 MDN 參考。

有些選擇器的行為就好像你已經(jīng)將類(lèi)應(yīng)用于文檔中的某些內(nèi)容。 例如p:first-child就像你在第一個(gè)p元素中添加了一個(gè)類(lèi)一樣，這些被稱(chēng)為 偽類(lèi)選擇器。 偽元素選擇器就像動(dòng)態(tài)插入一個(gè)元素一樣，例如::first-line的表現(xiàn)與用span 包裹第一行文本類(lèi)似。 但是，如果該行的長(zhǎng)度發(fā)生變化，它將重新應(yīng)用，如果插入該元素則不會(huì)出現(xiàn)這種情況。 這些選擇器可能會(huì)相當(dāng)復(fù)雜。 在下面的CodePen中是一個(gè)用偽類(lèi)鏈接的偽元素的例子。 我們使用:first-child偽類(lèi)定位第一個(gè)p元素，然后::first-line選擇器選擇該元素的第一行，就好像在第一行周?chē)砑恿艘粋€(gè)以使其變?yōu)榇煮w和改變顏色。

<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);}

繼承和層疊

層疊是指當(dāng)元素應(yīng)用了多個(gè)樣式規(guī)則，哪個(gè)規(guī)則優(yōu)先應(yīng)用。 如果你曾經(jīng)遇到過(guò)無(wú)法理解為什么某些CSS似乎沒(méi)有應(yīng)用的情況，那可能是層疊沒(méi)有運(yùn)用好。 層疊與繼承緊密相關(guān)，繼承定義了子元素可以繼承父元素的樣式屬性。 它還與特異性有關(guān)，不同的選擇器具有不同的特異性，當(dāng)有幾個(gè)選擇器可以應(yīng)用于一個(gè)元素時(shí)，繼承可以決定應(yīng)用哪個(gè)規(guī)則。

注意：為了理解所有這些內(nèi)容，我建議閱讀MDN CSS簡(jiǎn)介中的 層疊和繼承。

如果你正在嘗試將一些CSS應(yīng)用于一個(gè)元素，那么你的瀏覽器開(kāi)發(fā)者工具是開(kāi)始最好的地方。看看下面的例子，我用元素選擇器 h1 將 h1 標(biāo)題設(shè)置為橙色。同時(shí)，我也使用類(lèi)選擇器設(shè)置h1 設(shè)置為紫色。 由于類(lèi)更具體，因此h1是紫色的。 在開(kāi)發(fā)者工具中，您可以看到元素選擇器被劃掉，因?yàn)樗鼪](méi)有被應(yīng)用。 一旦你看到瀏覽器正在獲取你的CSS（但其他東西已經(jīng)推翻了它），那么你可以開(kāi)始找出原因。

<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里一切都是盒子。 屏幕上顯示的所有內(nèi)容都有一個(gè)框，盒模型描述了如何計(jì)算該框的大小 - 將外邊距，內(nèi)邊距和邊框考慮進(jìn)去。 標(biāo)準(zhǔn)的CSS框模型接受給定元素的寬度，然后將內(nèi)邊框和邊框添加到該寬度上——這意味著元素占用的空間大于給定的寬度。

最近，我們已經(jīng)能夠選擇使用IE盒模型，使得元素上的給定寬度作為屏幕上可見(jiàn)元素的寬度。 任何內(nèi)邊距或邊框都會(huì)從邊緣插入框的內(nèi)容。 這對(duì)許多布局更有意義。

在下面的演示中，我有兩個(gè)盒子。 兩者的寬度均為200像素，邊框?yàn)?像素，內(nèi)邊距為20像素。 第一個(gè)框使用標(biāo)準(zhǔn)框模型，因此占用總寬度為250像素，第二個(gè)框使用IE盒模型，因此實(shí)際上是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;}

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

注意：在IE6之前，Internet Explorer使用IE盒模型，內(nèi)邊框和邊框插入給定寬度的內(nèi)容里。 所以有一段時(shí)間瀏覽器使用不同的盒模型！ 如果今天的互操作性問(wèn)題感到沮喪，現(xiàn)在已經(jīng)有所改善，那么我們就不會(huì)處理瀏覽器以不同的方式計(jì)算元素的寬度。

在 CSS Tricks 里，有關(guān)于盒模型和盒子尺寸的很好的解釋，并解釋了在你的網(wǎng)站中全局使用IE盒模型的最佳方法。

標(biāo)準(zhǔn)流

如果你的文檔內(nèi)容用一些HTML標(biāo)記，你的文檔將具有可讀性。標(biāo)題和段落會(huì)另起新的一行，單詞組成句子時(shí)，它們之間有一個(gè)空格。標(biāo)記是用來(lái)格式化的，像 em 不會(huì)破壞句子的流。 句子會(huì)表現(xiàn)標(biāo)準(zhǔn)流，或塊流布局。句子的每個(gè)部分都被描述為“在流中”，它知道句子其余內(nèi)容，所以不會(huì)重疊。

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

格式化上下文

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

本質(zhì)上，格式化上下文定義了外部和內(nèi)部類(lèi)型。外部控制元素與頁(yè)面上其他元素的行為，內(nèi)部控制子元素的外觀。例如，當(dāng)你設(shè)置 display:flex ，你在設(shè)置外部為塊格式化上下文，設(shè)置子元素為 flex 格式化上下文。

注意：最新版本的Display規(guī)范改變了 display 的值，顯式聲明外部和內(nèi)部的類(lèi)型。因此，將你可能會(huì)聲明 display:block flex; （外部為 block，內(nèi)部為 flex）

在 MDN 上關(guān)于 display的信息

進(jìn)入或離開(kāi)流

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

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

<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">I am absolutely positioned and out of flow.</div></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;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;} 然而，浮動(dòng)元素也會(huì)從流中脫離，但后面的元素的文本將環(huán)繞該浮動(dòng)元素。你可以設(shè)置后面元素的背景顏色，你會(huì)看到他們會(huì)上升并占用了原來(lái)浮動(dòng)元素原來(lái)的空間。<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上有關(guān) 流中和脫離流 的信息。 需要記住的重要一點(diǎn)是，如果從流中取出一個(gè)元素，則需要自己管理重疊，因?yàn)閴K流布局的常規(guī)規(guī)則不再適用。

布局

十五年來(lái)，我們一直使用CSS布局，但沒(méi)有設(shè)計(jì)一套布局系統(tǒng)。這已經(jīng)改變了。 我們現(xiàn)在擁有功能完備的布局系統(tǒng)，其中包括 Grid 和 Flexbox ，還有多列布局和舊布局方法也應(yīng)用于實(shí)際目的。如果你想對(duì)CSS布局還不熟悉，你可以閱讀 MDN 上的布局教程，或閱讀我發(fā)表在Smashing雜志上的文章 《開(kāi)始學(xué)習(xí)CSS布局》。

不要認(rèn)為grid和flexbox等方法在某種程度上是競(jìng)爭(zhēng)的。為了更好地使用布局，你有時(shí)會(huì)發(fā)現(xiàn)組件最好作為 flex ，有時(shí)作為 Grid。有時(shí)，你想要多列流動(dòng)布局。所有這些都是不錯(cuò)的選擇。如果你覺(jué)得自己在與某些事物的行為方式作斗爭(zhēng)，這通常是一個(gè)非常好的跡象，表明它可能值得退一步，嘗試一種不同的方法。我們已經(jīng)習(xí)慣了在CSS上做一些我們想做的事情，以至于我們可能會(huì)忘記我們還有很多其他的選擇可以嘗試。

布局是我的主要專(zhuān)業(yè)領(lǐng)域，我在Smashing Magazine和其他地方寫(xiě)了很多文章，試圖開(kāi)拓新的布局美化。 除了上面提到的布局文章，我在Flexbox上有一整套系列 - 《從創(chuàng)建Flex 容器時(shí)，發(fā)生了什么》。 在 Grid示例 上，我列出很多CSS Grid 的例子 — 以及一個(gè)視頻教程。

此外 - 特別是對(duì)于設(shè)計(jì)師 - 查看 Jen Simmons 和她的《Layout Land》視頻系列。

對(duì)齊

通常，我會(huì)將對(duì)齊和布局分開(kāi)，雖然大多數(shù)人把對(duì)齊當(dāng)作 Flexbox的一部分。對(duì)齊這些屬性適用于所有布局方法上，應(yīng)該在上下文去理解對(duì)齊，而不是考慮 “Flexbox對(duì)齊”或“CSSGrid 對(duì)齊”。對(duì)齊屬性在大體上表現(xiàn)一樣，但不同布局方式里會(huì)有一些差異。

在MDN上，您可以深入了解 盒對(duì)齊 及其在Grid，Flexbox，多列和塊布局中的實(shí)現(xiàn)方式。 在Smashing Magazine上，我有一篇文章專(zhuān)門(mén)介紹Flexbox中的對(duì)齊方式：你需要知道的有關(guān)Flexbox中對(duì)齊的所有內(nèi)容。

尺寸

我在2018年花了很多時(shí)間討論了內(nèi)部和外部尺寸規(guī)范，特別是它與Grid和Flexbox的關(guān)系。在web上，我們習(xí)慣于設(shè)置尺寸為長(zhǎng)度或百分比，這就是我們?nèi)绾问褂酶?dòng)來(lái)制作網(wǎng)格類(lèi)型布局的方法。然而，現(xiàn)代的布局方法可以為我們做很多空間分配——如果我們?cè)试S的話。值得花時(shí)間去了解Flexbox如何分配空間(或Grid fr 單元如何工作)。

在Smashing Magazine上，我寫(xiě)了一些關(guān)于 布局中的尺寸 的文章，也寫(xiě)了一些關(guān)于Flexbox的文章，比如 Flex 盒子有多大?

響應(yīng)式設(shè)計(jì)

通常，新的Grid和Flexbox布局方法意味著我們可以使用比舊方法更少的媒體查詢(xún)，因?yàn)樗鼈兎浅ｌ`活，可以響應(yīng)視口或組件大小的變化，而無(wú)需我們更改元素的寬度。 但是，有些地方需要添加一些斷點(diǎn)來(lái)進(jìn)一步增強(qiáng)設(shè)計(jì)。

以下是響應(yīng)式設(shè)計(jì)的一些簡(jiǎn)單指南，一般情況下，對(duì)于媒體查詢(xún)，請(qǐng)查看我的文章《在2018年使用媒體查詢(xún)進(jìn)行響應(yīng)式設(shè)計(jì)》。我將查看媒體查詢(xún)的用途，并介紹規(guī)范4的媒體查詢(xún)的新功能。

字體和排版

與布局一樣，網(wǎng)絡(luò)上的字體使用在去年發(fā)生了巨大的變化。現(xiàn)在，可變字體，使單個(gè)字體文件具有無(wú)限的變化。 要了解它們是什么以及它們?nèi)绾喂ぷ?#xff0c;請(qǐng)觀看Mandy Michael的精彩簡(jiǎn)短演講：可變字體和網(wǎng)頁(yè)設(shè)計(jì)的未來(lái)。 另外，我會(huì)推薦Jason Pamental的動(dòng)態(tài)排版與現(xiàn)代CSS和可變字體。

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

MDN上的指南將證明一開(kāi)始使用可變字體是非常有用的。要了解如何為不支持可變字體的瀏覽器實(shí)現(xiàn)回退解決方案，請(qǐng)閱讀Oliver Schondorfer的《使用回退Web字體實(shí)現(xiàn)可變字體》Firefox DevTools字體編輯器還支持使用可變字體。

變形和動(dòng)畫(huà)

CSS轉(zhuǎn)換和動(dòng)畫(huà)絕對(duì)是我需要知道的基礎(chǔ)。 我不經(jīng)常需要使用它們，在使用時(shí)會(huì)忘記語(yǔ)法。 值得慶幸的是，MDN上的參考資料幫助了我，我建議從使用CSS變換和使用CSS動(dòng)畫(huà)的指南開(kāi)始。 Zell Liew也有一篇很好的文章，為CSS過(guò)渡提供了很好的解釋。

要發(fā)現(xiàn)一些可能的事情，請(qǐng)查看Animista網(wǎng)站。

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

使用速查表作為回憶，而不是學(xué)習(xí)工具

當(dāng)我提到Grid或Flexbox資源時(shí)，我經(jīng)常看到回復(fù)說(shuō)，如果沒(méi)有特定的速查表，他們就不能使用Flexbox。我覺(jué)得把速查表作為記憶助手查找語(yǔ)法沒(méi)有問(wèn)題，我自己也出版過(guò)一些速查表。完全依賴(lài)速查表的問(wèn)題是當(dāng)你復(fù)制語(yǔ)法時(shí)，你可能會(huì)忽略為什么要這樣寫(xiě)。然后，當(dāng)你遇到屬性的行為似乎不同的情況時(shí)，這種明顯的不一致性似乎令人困惑，或者是語(yǔ)言的錯(cuò)誤 。

如果你發(fā)現(xiàn)CSS在做一些非常奇怪的事情的情況下，問(wèn)問(wèn)為什么。創(chuàng)建一個(gè)簡(jiǎn)單的測(cè)試用例來(lái)強(qiáng)調(diào)這個(gè)問(wèn)題，問(wèn)問(wèn)對(duì)規(guī)范更熟悉的人。我被問(wèn)到的許多CSS問(wèn)題都是因?yàn)槿藗冋J(rèn)為屬性的表現(xiàn)與它在現(xiàn)實(shí)中的表現(xiàn)不同。這就是為什么我經(jīng)常討論關(guān)于對(duì)齊和尺寸，因?yàn)檫@些地方經(jīng)常會(huì)混淆。

“我自己是一名從事了5年前端的老程序員，辭職目前在做講師，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端干貨，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5到各種框架都有整理，送給每一位前端小伙伴，這里是小白聚集地，歡迎初學(xué)和進(jìn)階中的小伙伴。"
加前端學(xué)習(xí)分享資料???（前端資料分享）

是的，CSS中有一些奇怪的東西。它是一門(mén)經(jīng)過(guò)多年進(jìn)化的語(yǔ)言，有些東西我們無(wú)法改變，除非我們發(fā)明了時(shí)間機(jī)器。然而，一旦你掌握了一些基礎(chǔ)知識(shí)，并且理解了為什么會(huì)這樣，你就可以更輕松地處理棘手的問(wèn)題。

總結(jié)

以上是生活随笔為你收集整理的前端小白如何学习 CSS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。