最近有網(wǎng)友私信我，學(xué)CSS總是覺得很難，跟著網(wǎng)站指南一個一個學(xué)，前面學(xué)后面忘；哪些是必須要用的也分不清。

這份最精簡的CSS學(xué)習(xí)路線，十分鐘讓你快速掌握CSS；學(xué)完之后你就是前端小達人！

本指南羅列了日常中必須要掌握的CSS技巧以及CSS的一些周邊框架，預(yù)處理器等；

掌握以下知識點，工作再也不用為CSS而發(fā)愁。

盒模型（Box Model）

在 CSS 中，在談?wù)撛O(shè)計和布局時使用術(shù)語“盒子模型”。

CSS 盒子模型本質(zhì)上是一個包裹每個 HTML 元素的盒子。

它包括：邊距、邊框、填充和實際內(nèi)容。下圖說明了盒子模型：

呈現(xiàn)方式（Display）

"display" 屬性指定是否/如何顯示元素。

每個 HTML 元素都有一個默認顯示值，具體取決于它是什么類型的元素。大多數(shù)元素的默認顯示值為block或 inline。

位置（Position）

"position" 屬性指定用于元素的定位方法的類型。

選擇器（Selectors）

響應(yīng)式設(shè)計（Responsive）

媒體查詢可用于檢查許多事情，例如：

• 視口的寬度和高度
• 設(shè)備的寬度和高度
• 方向（平板電腦/手機是橫向還是縱向模式？）
• 解決

使用媒體查詢是一種流行的技術(shù)，可以為臺式機、筆記本電腦、平板電腦和手機（例如 iPhone 和 Android 手機）提供定制的樣式表。

排版（Typography）

動畫、過度 （Animations）

柵格（CSS Grid）:

響應(yīng)式網(wǎng)頁設(shè)計 -網(wǎng)格視圖

在設(shè)計網(wǎng)頁時使用網(wǎng)格視圖非常有幫助。它使在頁面上放置元素變得更加容易。

響應(yīng)式網(wǎng)格視圖通常有 12 列，總寬度為 100%，并且會在您調(diào)整瀏覽器窗口大小時收縮和擴展。

框架（ CSS Frameworks）

• Bootstrap
• Tailwindcss

預(yù)處理器（CSS Preprocessors）

• sass
• less

以上就是今天為大家分享的內(nèi)容。