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

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

語言基礎(chǔ)知識

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

選擇器，不僅僅有類

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

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

有些選擇器的行為就好像你已經(jīng)將類應用于文檔中的某些內(nèi)容。 例如p:first-child就像你在第一個p元素中添加了一個類一樣，這些被稱為 偽類選擇器。 偽元素選擇器就像動態(tài)插入一個元素一樣，例如::first-line的表現(xiàn)與用span 包裹第一行文本類似。 但是，如果該行的長度發(fā)生變化，它將重新應用，如果插入該元素則不會出現(xiàn)這種情況。 這些選擇器可能會相當復雜。 在下面的CodePen中是一個用偽類鏈接的偽元素的例子。 我們使用:first-child偽類定位第一個p元素，然后::first-line選擇器選擇該元素的第一行，就好像在第一行周圍添加了一個以使其變?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);}

繼承和層疊

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

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

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

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

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

在下面的演示中，我有兩個盒子。 兩者的寬度均為200像素，邊框為5像素，內(nèi)邊距為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;}

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

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

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

標準流

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

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

格式化上下文

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

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

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

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

進入或離開流

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

對于絕對定位的元素，是最明顯的。 如果你設(shè)置一個元素 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">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;} 然而，浮動元素也會從流中脫離，但后面的元素的文本將環(huán)繞該浮動元素。你可以設(shè)置后面元素的背景顏色，你會看到他們會上升并占用了原來浮動元素原來的空間。<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) 流中和脫離流 的信息。 需要記住的重要一點是，如果從流中取出一個元素，則需要自己管理重疊，因為塊流布局的常規(guī)規(guī)則不再適用。

布局

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

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

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

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

對齊

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

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

尺寸

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

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

響應式設(shè)計

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

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

字體和排版

與布局一樣，網(wǎng)絡上的字體使用在去年發(fā)生了巨大的變化。現(xiàn)在，可變字體，使單個字體文件具有無限的變化。 要了解它們是什么以及它們?nèi)绾喂ぷ?#xff0c;請觀看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變換和使用CSS動畫的指南開始。 Zell Liew也有一篇很好的文章，為CSS過渡提供了很好的解釋。

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

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

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

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

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

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

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

總結(jié)

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

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