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

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

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

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

盒模型（Box Model）

在 CSS 中，在談論設計和布局時使用術語“盒子模型”。

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

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

呈現方式（Display）

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

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

位置（Position）

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

選擇器（Selectors）

響應式設計（Responsive）

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

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

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

排版（Typography）

動畫、過度 （Animations）

柵格（CSS Grid）:

響應式網頁設計 -網格視圖

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

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

框架（ CSS Frameworks）

• Bootstrap
• Tailwindcss

預處理器（CSS Preprocessors）

• sass
• less

以上就是今天為大家分享的內容。