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

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

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

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

盒模型（Box Model）

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

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

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

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

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

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

位置（Position）

"position" 屬性指定用于元素的定位方法的類(lèi)型。

選擇器（Selectors）

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

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

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

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

排版（Typography）

動(dòng)畫(huà)、過(guò)度 （Animations）

柵格（CSS Grid）:

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

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

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

框架（ CSS Frameworks）

• Bootstrap
• Tailwindcss

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

• sass
• less

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