不要重復造輪子，2024 年前端開發必須了解的 7 種 CSS 框架

SS 框架包含多個可供開發人員和網頁設計人員使用的現成 CSS 庫。樣式表是為網頁設計中的日常任務而準備的，例如導航欄、字體、顏色和布局設置。它們簡化了前端開發人員的工作，為他們提供了創建UI界面的工具，而不是從頭開始每個項目。樣式表受到 JavaScript 等其他腳本技術的支持和擴展。

使用 CSS 框架時，用戶必須使用正確的類、結構和 ID 編寫 HTML 代碼才能創建網頁，因為 CSS 樣式表是完整的。前端開發人員使用 CSS 框架快速實現網站和應用程序上的關鍵用戶界面元素，例如按鈕、樣式表單和自適應網格。

人們為什么使用框架，最直接的答案是效率。框架開箱即用，包含大量元素和樣式，否則您在開發網站時需要從頭開始構建。許多開發人員和網頁設計師也會在構建自定義設計系統之前使用框架快速構建新網站或應用程序的原型。

以下是 2024 年最流行的 CSS 框架列表：

1.Tailwind

根據2023 年 CSS 現狀研究，“Tailwind CSS 再次成為開發者樂于繼續使用的主要 UI 框架”。

Tailwind 是一個“實用程序優先的CSS 框架”，它提供的類使用戶能夠直接在用戶的標記中創建自定義用戶界面。實現內聯樣式有助于快速創建引人注目的 UI，而無需編寫任何 CSS。

Tailwind CSS 是最流行的實用 CSS 庫之一，并為網頁設計提供了其他顯著優勢。在實踐中，雖然 Tailwind 使讀取類屬性變得更加困難，但您可以通過它如何簡化樣式的實際維護來恢復所有這些。Tailwind 還消除了使用中間類名來掛鉤樣式的需要，這很有幫助，特別是當錯誤或代碼漂移使類名產生誤導時。

Tailwind 類和內聯樣式之間有一個顯著區別：特異性！無論源代碼組織如何，內聯樣式都會覆蓋基于 CSS 類的樣式，當元素需要上下文相關樣式時，會導致極其令人沮喪的情況。對于 Tailwind，所有都是類，就像大多數手寫 CSS 一樣，這使得混合自定義 CSS 和框架樣式是可預測的。

2.Bootstrap

Bootstrap由 Twitter 的 Mark Otto 和 Jacob Thornton 創建，是一個開源框架，它使用 CSS 和基于 JavaScript 的界面組件模板來鼓勵內部工具之間的一致性。它倡導了現在無處不在的移動優先概念，并為其無縫實施提供了必要的工具。Bootstrap 通過合并網格系統，將屏幕離散地劃分為最終用戶看不到的列，從而促進了流行的移動優先方法的直接采用。

得益于 Bootstrap，開發人員不再被迫啟動單獨的項目來僅僅為了調整網站以適應較小的屏幕尺寸。當合并必要的 Bootstrap 類時，設計會自動調整。

由于它是一個廣泛使用和測試的庫，擁有大量的貢獻者和審閱者，因此如果您花時間閱讀和理解實際代碼（甚至是導致問題的問題），您可以從中學到很多實用的架構/設計選擇。給他們）。此外，它還提供了一些非常全面且相對簡單的文檔。它的可擴展性也很強，同時也是細粒度的。

3.Materialise

Materialise 是由 Google 精心設計和概念化的 CSS 框架，建立在 Material Design 原則之上，Material Design 是一種無縫融合創造力和技術的創新設計語言。谷歌的目標是創建一個設計框架，為任何平臺上的所有產品提供統一的用戶體驗。

該框架提供集成自定義組件、精致動畫和過渡的默認樣式，確保為用戶提供無縫體驗。Materialise 作為一個以用戶體驗為中心的框架脫穎而出，它包含旨在為用戶提供增強反饋的組件和動畫。提供了詳細的文檔以及具體的代碼示例，以幫助新用戶有效地導航該框架。

4.Foundation

Foundation被描述為“世界上最先進的響應式前端框架”，提供了一個全面的工具包，包括網格系統、HTML、SASS 和 CSS 用戶界面元素、模板以及包含導航、按鈕、排版、表格等等。此外，它還通過 JavaScript 擴展提供可選功能。該框架非常強調移動設備，并且事實證明對于開發需要強大設計基礎的大量 Web 應用程序非常有益。

其龐大、靈活的工具包對于廣大前端開發人員來說是寶貴的資源，可以幫助他們找到有效的解決方案。Foundation 提供了針對電子郵件和網頁量身定制的獨特框架組件，可隨時部署在各自的域中。此外，它還具有命令行界面（CLI），這對于從事涉及 Webpack 等模塊捆綁器的項目的開發人員來說特別有利。

該框架旨在讓前端開發人員完全控制其用戶界面。它不要求他們使用特定的語言或風格，這使其成為大多數人的首選工具。

5.Bulma

Bulma基于 Flexbox，是一個開源、響應式 CSS 框架，以其卓越的內置功能而聞名，減少了大量手動 CSS 編碼的需要，并確保快速響應時間。它使用圖塊來構建 Metro 風格的網格，從而產生時尚且組織良好的頁面布局。用戶可以通過僅導入他們想要使用的特定元素來進一步簡化流程。

由于其模塊化設計方法和高水平的定制化，Bulma 成為開發人員和設計師的最愛。其響應式模板顯著減少了設計工作量，提供了下拉菜單、表格、面板和導航欄等各種組件。Bulma 還提供交互式教程和入門模板。此外，該框架擁有龐大的 Stack Overflow 社區，對于獲得各種問題的解決方案具有無價的價值。

6.Skeleton

Skeleton在其主頁上被描述為“極其簡單、響應式的樣板”，這個輕量級工具只有 400 行源代碼，旨在生成可在移動設備和更大屏幕上無縫運行的 CDD 元素。Skeleton 采用 12 列網格系統，最大寬度為 960px，可容納小型、中型和大型顯示器，只需一行 CSS 代碼即可輕松修改。它包含了響應式設計的所有基本元素，具有用戶友好的語法，有助于快速實施，使響應式設計的創建變得非常簡單。

該工具非常適合設計師入門。如果您正在著手一個較小的項目，或者只是覺得您不需要大型框架的所有實用功能，那么您應該使用 Skeleton。

7.Open Props

Open Props是一個完全基于 CSS 變量構建的低級框架，這意味著它幾乎完全可定制，并且可以進行調整以適應任何設計系統。它使用即時編譯來保證只生成項目所需的 CSS 變量，這可能有助于提高應用程序的性能。

在 CSS 中使用原始樣式表可能會很快失去控制，尤其是在與團隊合作時。使用 Tailwind 或 Open Props 等框架使您能夠為每個站點創建自定義主題，從而促進高性能內聯樣式的實現。此外，這些框架具有壓縮語法，可以更快地設計樣式。如果這些框架提供了您想要的所有樣式，為什么還要重新發明輪子呢？使用框架使工作更智能、更輕松，而不是更困難、更繁重。

在開篇

開篇之前，先提個問題，什么是類？分類嗎？可以這么說吧！我們可以給物體分類，也可以給人分類。正所謂，物以類聚，人以群分。難道我們這里是給元素分類？用分類來理解是不準確的啦！從某些角度，也可以理解成分類，說白了也就是個標識而已。廢話不說，我們正式步入今晚的主題！

HTML類

html中的類是什么鬼？先上個例子，然后再剖析它：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復習鞏固，攻破前端技能</title>
        <style>
            .c1 {
              background-color: tomato;
              color: white;
              border: 2px solid black;
              margin: 20px;
              padding: 20px;
            }
        </style>
    </head>
    <body>
        <div class="c1">
            <h2>彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        </div>

        <div class="c1">
            <p>筆者親自設計的，一個入侵性極低的Oracle監控方案</p>
            <a href="https://mp.weixin.qq.com/s/PDm2bK7IMFOwjNHFOblgXg" target="_blank">oracledb_exporter監控Oracle，一個入侵性極低的監控方案。</a>
        </div>

        <div class="c1">
            <p>意猶未盡的第2篇再次推出，一個入侵性極低的Oracle監控方案</p>
            <a href="https://mp.weixin.qq.com/s/gFeWlZRGkIMAOCNFpKm8-Q" target="_blank">意猶未盡的第2篇再次推出，繼續講解oracledb_exporter監控Oracle，一個入侵性極低的監控方案。</a>
        <div>
    </body>
</html>

效果如下圖：

好了，我們正式開始對它進行剖析，搞清楚到底啥是類，上面的小栗子中，定義了3個div元素，它們的class屬性值均為 "c1"。然后注意到沒有？在head中的style標簽里，通過 ”.c1“ 的方式同時對3個div進行了css樣式的設置。所以也由此引出了它的一個特點，那就是多個HTML元素可以共享同一個類，上述的例子中3個div（元素）的類（class）名都定義了為“c1”，且同時對3個div進行了css樣式的設置，這就是它的共享性。不知道筆者說明白了沒有，好尷尬。

那接下來，我們再來個小栗子：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復習鞏固，攻破前端技能</title>
        <style>
            .c2 {
                font-size: 120%;
                color: crimson;
            }
        </style>
    </head>
    <body>
        <h1>彩虹<span class="c2">運維</span>技術棧社區</h1>
        <p>我們會<span class="c2">持續分享</span>運維和運維開發領域相關的技術文章</p>
    </body>
</html>

效果如下圖：

上面的例子中，“運維”和“持續分享”這兩個字都在span標簽里，且這兩個span標簽都定義了class屬性，class=“c2”，同時通過“.c2”的方式設置了CSS屬性。上面的例子中，就是通過這樣的辦法實現了對某部分的文字進行樣式的設置。

截止目前，我們通過兩個小栗子，直接解剖了什么是類，那么我們再做個小總結：

class屬性可以用于任何HTML元素
類名區分大小寫

CLASS的語法

其實在前面的小栗子中，已經講解過class的語法了，不知道廣大盆友們注意到了沒有。如果沒有注意到，咱們再這個章節重新復習一下。

看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復習鞏固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3">彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <p class="cc3">我們會持續分享運維和運維開發領域相關的技術文章</p>
    </body>
</html>

效果如下圖：

上面的例子中，是如何引用到文本內容并設置CSS屬性的呢？答案就是通過.css3這樣的語法，我們設置的類名是css3。然后在style中，設置css屬性，在{}大括號里的內容就是CSS的屬性，關于CSS，筆者后續會專門逐一講解哈。

一個元素可以屬于多個類

什么？一個元素可以屬于多個類？到底怎么玩，廢話不說，咱們上個例子就知道了。下面的例子，是在上一個例子的基礎上進行了小改造，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復習鞏固，攻破前端技能</title>
        <style>
            .cc3 {
              background-color: blue;
              color: white;
              padding: 8px;
            }
            .css4 {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="cc3 css4">彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <p class="cc3">我們會持續分享運維和運維開發領域相關的技術文章</p>
    </body>
</html>

效果如下圖：

注意到這個語法了嗎？class="cc3 css4"，沒錯了！在上面的style中，分別對同一個h2元素進行設置了不同的CSS屬性。也就是說，對同一個元素需要定義多個類，用空格分隔類名就可以實現啦！是不是太簡單了啦？

類的復用

什么？類的復用怎么理解？也就是說不同的元素可以共享同一個類。其實這個概念，在之前的例子中都有用到啦！只不過還沒有拋出這個概念而已，下面我們來個小栗子，鞏固一下。

這個例子是在上一個例子的基礎上做了小改造，看下面代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復習鞏固，攻破前端技能</title>
        <style>
            .share_class {
                background-color: blue;
                color: white;
                padding: 8px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2 class="share_class">彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <p class="share_class">我們會持續分享運維和運維開發領域相關的技術文章</p>
    </body>
</html>

效果如下圖：

注意到了嗎？兩個元素：h2和p元素，都使用了相同的類，類名叫share_class，這就達到了復用的效果呀！

JavaScript使用class

截止目前，還沒講解到js，那么先講個小知識點，js如何使用class的。當然，核心的用法也是使用類名為指定的元素完成一些功能，在JavaScript里是通過getElementsByClassName()方法來訪問元素中的類名，反言之，也可以說是通過getElementsByClassName()方法來訪問帶有指定類名的元素。關于js的知識，后續筆者會一一講解每個知識點，不急，咱們慢慢來。

下面，先來個小栗子，這例子很簡單，通過js實現點擊后隱藏h2和p元素的內容，下面看代碼：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>陪你復習鞏固，攻破前端技能</title>
    </head>
    <body>
        <button onclick="my_fun()">點擊可以隱藏元素哦</button>
        <h2 class="c1">彩虹運維技術棧社區，公眾號ID：TtrOpsStack</h2>
        <p class="c1">我們會持續分享運維和運維開發領域相關的技術文章</p>

    <script>
        function my_fun() {
          var x = document.getElementsByClassName("c1");
          for (var i = 0; i < x.length; i++) {
            x[i].style.display = "none";
          }
        }
    </script>
    
    </body>
</html>

效果如下圖：

隱藏前

隱藏后

看到效果了嗎？隱藏的功能就是通過js實現的，js很強大，后面我們一起專門分享js的知識點。

寫在最后

好了，今晚的知識點分享到此為止啦！誠邀廣大盆友的關注，望多多點贊、轉發、收藏。

本文轉載于（喜歡的盆友關注我們）：https://mp.weixin.qq.com/s/c9tXDae2l1osseOwKzILuQ

SS課堂筆記

1、CSS的概念

層疊樣式表(英文全稱：Cascading Style Sheets) *層疊：多個樣式可以作用在同一個html的元素上，同時生效

是一種用來表現HTML或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。

樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一個

CSS很像化妝，通過不同的CSS將同樣的HTML內容打造為不同的呈現結果。

所以，前端程序員相互表白的時候可以說：you are the CSS to my HTML.

這是不是CSS是對HTML進行美化和布局作用的最好總結？

2、CSS的優勢

功能強大
將內容展示和樣式控制分離

降低耦合度。解耦
讓分工協作更容易
提高開發效率

3、CSS的使用：CSS與html結合使用

根據定義CSS的位置不同，分為行內樣式、內部樣式和外部樣式

3.1 行內樣式

也稱為內聯樣式

直接在標簽中編寫樣式，通過使用標簽內部的style屬性；

一般在測試的時候使用居多：
語法：
<html標簽 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標簽>
案例：
<div style="color: red;">hello my css</div>

弊端：只能對當前的標簽生效，沒有做到內容和樣式相分離，耦合度太高。

3.2 內部樣式

定義在head標簽內，通過style標簽，該標簽內容就是CSS代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>內部樣式</title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

3.3 外部樣式

1、提前定義css資源文件

2、在head標簽內，定義link標簽引入外部樣式文件。

lina.css文件，放在與html頁面同級的css文件夾中：
div {
    color: red;
}

html頁面中的引入
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部樣式</title>
        <link rel="stylesheet" href="css/lina.css" />
    </head>
    <body>
        <div>hello my css</div>
    </body>
</html>

作用域的范圍:外部樣式表>內部樣式表>行內樣式表

優先級：外部樣式表<內部樣式表<行內樣式表;

同樣的樣式作用在同一個標簽身上：就近原則；不同樣式作用在同一個標簽身上:疊加生效。

4、CSS語法

基本格式：由兩個主要的部分構成：選擇器，以及一條或多條聲明:

選擇器 {
        屬性1:值1;
        屬性2:值2;
        ...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號分割，不同的屬性之間用分號隔開。

例如：

5、CSS注釋

注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。

CSS注釋以 /* 開始, 以 */ 結束

/*這是CSS的注釋*/
div {
    color: red;  /*文字顏色是紅色*/
}

6、基本選擇器：篩選具有相似特征的元素

6.1 id選擇器

選擇具有相同id屬性值的元素，建議html頁面中的id值唯一

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。

PS： ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

雖然多個元素可以使用同一個id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對多個標簽生效，使用class選擇器。

6.2 class選擇器

選擇具有相同的class屬性值的元素。

class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：

PS：類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。

6.3 元素選擇器/標簽選擇器

選擇具有相同標簽名稱的元素。

定義選擇器語法：標簽名稱{}；PS：標簽名稱必須是html提供好的標簽。

使用標簽選擇器：自動使用在所有的同名的標簽上

7 優先級

7.1 選擇器的優先級

ID選擇器 > 類選擇器 > 標簽選擇器

當多個選擇器作用在同一個標簽上的時候，如果屬性沖突，看優先級；如果不沖突，樣式疊加生效。

7.2 樣式表的優先級

行內樣式 > 內部樣式 >外部樣式

同樣，三個樣式表中都有內容作用在同一個html標簽的時候，如果屬性沖突，看優先級；如果不沖突，樣式疊加生效。

8 CSS常用樣式

8.1 color :字體顏色

跟顏色相關的取值分3種：

1、顏色的單詞 red blue...

2、rgb(紅，綠，藍)三色的取值范圍是0-255 rgb(255,0,0)

rgba（紅，綠，藍,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六進制數字組成的例如：#FF0000

8.2 width height:寬高

PS：只有塊狀元素可以設置寬高，行級元素設置不生效。

取值方式有2種：

1：數值絕對數字單位是像素PX

2：百分比：占據父元素的比例

8.3 背景樣式

8.4 文本樣式

8.5 列表樣式

8.6 邊框樣式

10 HTML&CSS調試利器

以谷歌瀏覽器為例說明。

快捷鍵F12或者工具條中的開發者工具調出以下內容。

在elements中可以看到當前頁面的所有標簽，在styles中可以看到html元素對應的樣式。

11 盒子模型

11.1 概念

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

盒子模型說明圖：

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。

11.2 盒子的寬度和高度

元素的實際寬度和高度：

當我們計算一個元素實際在頁面占有的總寬度計算公式是這樣的：

總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

11.3 如果想要設置的寬度直接就是元素的實際寬度，通過box-sizing屬性

12 補充常用樣式

12.1 float 浮動

12.1.1 什么是浮動

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

12.1.2 元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

12.1.3 彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

12.1.4 clear--清除浮動

元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側不能出現浮動元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮動</title>
        <style>
            div{
                width: 400px;
                height: 200px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <!--沒有浮動屬性的元素都屬于常規文檔流：從上往下從左往右依次顯示
            浮動的元素都脫離了常規文檔流；
            為了好理解：大家可以認為浮動元素屬于一層，非浮動元素屬于一層
            如果想要非浮動元素不受浮動元素的影響，需要使用clear屬性
        -->
        <div style="background: rgba(255,0,0,0.5); float: left;">
            div1-左浮動，脫離常規文檔流，緊貼父元素或者上一個同方向浮動
        </div>
        <div style="background: lawngreen; width: 600px; height: 350px; ">
            div2-未浮動，常規文檔流,
            <br/>PS:此時div1在div2的上方顯示，因為div1和div2是不同文檔流中的元素，顯示互不影響
            如果不想讓div2被浮動元素影響，需要添加clear屬性。
            添加clear: left;之后div2就會忽略div1浮動的影響，在div1層后面顯示，不會重疊了，大家可以自己試驗一下
        </div>
        <div style="background: lightblue; float: right; width: 1800px;">
            div3-右浮動，脫離常規文檔流，緊貼父元素或者上一個同方向浮動
        </div>
        <div style="background: lightcoral; width: 600px; height: 350px; ">
            div4-未浮動，常規文檔流,
            <br/>PS:此時div3在div4的上方顯示，因為div3和div4是不同文檔流中的元素，顯示互不影響
            如果不想讓div4被浮動元素影響，需要添加clear屬性。
            添加clear: right;之后div4就會忽略div3浮動的影響，在div3層后面顯示，不會重疊了，大家可以自己試驗一下
            
            clear屬性有三個取值：left、right、both;分別是取出左浮動、有浮動和所有浮動元素的影響
        </div>
        <div style="background: lavender;">
            div5-未浮動，常規文檔流,
        </div>
    </body>
</html>

12.2 overflow

控制內容溢出元素框時顯示的方式。

overflow屬性有以下值：

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，并且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

注意:overflow 屬性只工作于指定高度的塊元素上。

注意: 在 OS X Lion ( Mac 系統) 系統上，滾動條默認是隱藏的，使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)。

12.3 Display(顯示) 與 Visibility（可見性）

12.3.1 兩者的區別

display屬性設置一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。

隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產生不同的結果。

visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

12.3.2 display 改變元素的類型

CSS樣式有以下三個：

display:block -- 顯示為塊級元素
display:inline -- 顯示為內聯元素
display:inline-block -- 顯示為內聯塊元素，表現為同行顯示并可修改寬高內外邊距等屬性

13 復合選擇器

由兩個或多個基礎選擇器，通過不同方式組合而成的。

可以更準確更精細的選擇目標元素標簽。

13.1 全局選擇器

語法：* {} 一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，一般將 * 替換為常用標簽的名稱，并用逗號分隔，其實就是使用并集選擇器。

13.2 并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。

語法：選擇器1，選擇器2，......選擇器N{}

意思是多個選擇器都是通用的樣式。任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。

13.3 交集選擇器

條件：交集選擇器由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。

語法：h3.class{ color:red; }

其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，例如div.list。

交集選擇器是并且的意思。即...又...的意思

例如：   table.bg   選擇的是： 類名為 .bg  的 表格標簽，但用的相對來說比較少。

13.4 后代選擇器

概念：后代選擇器又稱為包含選擇器。

作用：用來選擇元素或元素組的子孫后代。

其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。

  格式：父級 子級{屬性:屬性值;屬性:屬性值;}

語法：.class h3{color:red;font-size:16px;}

當標簽發生嵌套時，內層標簽就成為外層標簽的后代。

子孫后代都可以這么選擇。或者說，它能選擇任何包含在內的標簽。

13.5 子元素選擇器

作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。

其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接。

語法：.class>h3{color:red;font-size:14px;}

 比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含著h3。

13.6 實現代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>復合選擇器</title>
		<style>
			/*全局選擇器：
			 	一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，
			 */
			*{
				color: #333;/*定義全局文字顏色，統一色彩基調*/
			}
			/*并集選擇器：通常用于集體聲明
			 	替換全局選擇器；
			 */
			div,p,dldt,dd{
				/*去掉瀏覽器的默認樣式*/
				margin: 0;
				padding: 0;
				color: #333;/*定義全局文字顏色，統一色彩基調*/
			}
			/*交集選擇器*/
			li.myli{
				color: red;
			}
			/*后代選擇器*/
			ul li{
				font-size: 28px;
			}
			.myUL li{
				font-family: "微軟雅黑";
			}
			.myUL li a{
				text-decoration: line-through;
			}
			/*子元素選擇器*/
			.demo>h3{
				color: red;
			}			
		</style>
		
	</head>
	<body>
		<ul>
			<li>li11111111111</li>
			<li class="myli">li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444<a href="">點擊我試試</a></li>
			<li class="myUL">
				<ul>
					<li>li11111111111</li>
					<li class="myli">li22222222222</li>
					<li>li33333333333</li>
					<li>li44444444444
						<a href="">點擊我試試</a>
					</li>
				</ul>
			</li>
		</ul>
		<ol>
			<li>li11111111111</li>
			<li>li22222222222</li>
			<li>li33333333333</li>
			<li>li44444444444</li>
		</ol>
		<div class="demo">
			div1
			<h3>靜夜思</h3>	
			<ul>
				<li><h3>靜夜思----li</h3></li>
			</ul>
		</div>
		
	</body>
</html>

13.6 偽類選擇器

偽類選擇器：和類選擇器相區別類選擇器是一個點比如 .demo {} 而我們的偽類用 2個點就是冒號比如 :link{} 。

作用：用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，比如可以選擇第1個，第n個元素。

因為偽類選擇器很多，比如鏈接偽類，結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。

a:link /* 未訪問的鏈接 */
a:visited /* 已訪問的鏈接 */
a:hover /* 鼠標移動到鏈接上 */
a:active /* 選定的鏈接 */

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>偽類選擇器</title>
		<style>			
			/*偽類選擇器*/			
			a:link{
				color: red;/*默認顏色是紅色*/	
			}
			a:visited{
				color: blue;/*訪問過的頁面是藍色*/	
			}
			a:hover{
				color: green;/*鼠標懸浮是綠色*/	
				font-size: 28px;
			}
			a:active{
				color: gold;/*按下鼠標不放手是金色*/	
				font-family: "微軟雅黑";
			}
		</style>
		
	</head>
	<body>
		<a href="03-常用樣式.html" target="_blank">常用樣式</a>
		<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
		<a href="05-綜合練習.html" target="_blank">綜合練習</a>
	</body>
</html>

注意**

寫的時候，他們的順序盡量不要顛倒按照 lvha(四類的首字母) 的順序。否則可能引起錯誤。
因為叫鏈接偽類，所以都是利用交集選擇器 a:link a:hover
因為a鏈接瀏覽器具有默認樣式，所以我們實際工作中都需要給鏈接單獨指定樣式。
實際開發中，我們很少寫全四個狀態，一般我們寫法如下：

a {   /* a是標簽選擇器  所有的鏈接 */
       font-weight: 700;
       font-size: 16px;
       color: gray;
}
a:hover {   /* :hover 是鏈接偽類選擇器 鼠標經過 */
       color: red; /*  鼠標經過的時候，由原來的 灰色 變成了紅色 */
}

13.7 復合選擇器比對

選擇器	作用	特征	使用情況	隔開符號及用法
后代選擇器	用來選擇元素后代	是選擇所有的子孫后代	較多	符號是空格 p .one
子代選擇器	選擇最近一級元素	只選親兒子	較少	符號是> .nav>p
交集選擇器	選擇兩個標簽交集的部分	既是又是	較少	沒有符號 p.one
并集選擇器	選擇某些相同樣式的選擇器	可以用于集體聲明	較多	符號是逗號 .nav, .header
鏈接偽類選擇器	給鏈接更改狀態		較多	重點記住 a{} 和 a:hover 實際開發的寫法

在線咨詢

上一篇：javascript反轉字符串的方法有哪些？
下一篇：Web前端開發基礎知識，設置網頁背景圖，如何在網頁中插入圖片

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

不要重復造輪子，2024 年前端開發必須了解的 7 種 CSS 框架

1.Tailwind

2.Bootstrap

3.Materialise

4.Foundation

5.Bulma

6.Skeleton

7.Open Props

在開篇

HTML類

CLASS的語法

一個元素可以屬于多個類

類的復用

JavaScript使用class

寫在最后

SS課堂筆記

1、CSS的概念

2、CSS的優勢

3、CSS的使用：CSS與html結合使用

3.1 行內樣式

3.2 內部樣式

3.3 外部樣式

4、CSS語法

5、CSS注釋

6、基本選擇器：篩選具有相似特征的元素

6.1 id選擇器

6.2 class選擇器

6.3 元素選擇器/標簽選擇器

7 優先級

7.1 選擇器的優先級

7.2 樣式表的優先級

8 CSS常用樣式

8.1 color :字體顏色

8.2 width height:寬高

8.3 背景樣式

8.4 文本樣式

8.5 列表樣式

8.6 邊框樣式

10 HTML&CSS調試利器

11 盒子模型

11.1 概念

11.2 盒子的寬度和高度

11.3 如果想要設置的寬度直接就是元素的實際寬度，通過box-sizing屬性

12 補充常用樣式

12.1 float 浮動

12.1.1 什么是浮動

12.1.2 元素怎樣浮動

12.1.3 彼此相鄰的浮動元素

12.1.4 clear--清除浮動

12.2 overflow

12.3 Display(顯示) 與 Visibility（可見性）

12.3.1 兩者的區別

12.3.2 display 改變元素的類型

13 復合選擇器

13.1 全局選擇器

13.2 并集選擇器

13.3 交集選擇器

13.4 后代選擇器

13.5 子元素選擇器

13.6 實現代碼

13.6 偽類選擇器

13.7 復合選擇器比對

您的項目需求

1、CSS的概念

4、CSS語法

5、CSS注釋

6、基本選擇器：篩選具有相似特征的元素

11.3 如果想要設置的寬度直接就是元素的實際寬度，通過box-sizing屬性